Question

如何使用Jest测试嵌套的React组件？

BasicInfo.js

    import React, { Component } from 'react';
    import FormComponent from '@/components/FormComponent';
    import Styles from './Style.scss';
    import {basicInfoForm} from './BasicInfoForm'


    class BasicInfo extends Component {


            componentDidMount = ()=>{
                this.props.form.setFieldsValue({status:true})
                }

        render() {
            const menu = [
                {

                  title: 'Basic Info',
                  key:'general',
                  formWrapperId:'address-form-wrapper',
                  key:'define',

                },
                {
                  title: 'Normal Info',
                  key:'economy',
                  formWrapperId:'address-form-wrapper',
                  key:'undefine'

                }
              ];


              return (
                <div id="basic-info-container">
                  <p id="basic-info-desc"> {formatMessage({id:description[mode]})}</p>
                  {menu.map(formRow=>(
                    <div key={formRow.key}>
                      <div id={`${formRow.key}-info-subtitle`}>{formRow.title}</div>
                      <div id={formRow.formWrapperId}>
                        <FormComponent
                          formName={`${title}_form`}
                          form={form}
                          item={formRow.item}
                          formItems={formRow.formItems}
                          onChangeEventRef={formRow.onChangeInput}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              );

        }







        }


    export default BasicInfo;

BasicInfo.test.js

import React from 'react';
import {shallow, mount} from 'enzyme';
import BasicInfo from './BasicInfoPage';
import FormComponent from '@/components/FormComponent';

describe('should checking Basic Info Page', () => {

    test('should check values', () => {
        const menu = [
            {
              title: 'Basic Info',
              key:'general',
              formWrapperId:'address-form-wrapper',
              key:'define'

            },
            {
              title: 'Normal Info',
              key:'economy',
              formWrapperId:'address-form-wrapper',
              key:'undefine'

            }
          ];

          const wrapper = shallow(<BasicInfo mock={menu} />);
          expect(tree).toMatchSnapshot()


    })


})

在这里，我正在映射菜单数组并调用子窗体组件来获取内容。因此，请提出如何为这种情况编写测试用例的建议。

运行npm测试时出现错误消息

页面检查›包装RENDERER快照
TypeError: Cannot read property 'formItem' of undefined

  123 |       const translation = 'agencyForm.agencyDetails.basicDetails';
  124 |       const { title , form, mode, agencyDetailModel}  = this.props
> 125 |       const {formItem} = agencyDetailModel;
      |              ^
  126 |       const {description} = this.state
  127 |
  128 |       const BasicFormRows =[
at Object.<anonymous> (src/pages/AgencyManagement/Agencies/AgencyDetails/BasicInfo/BasicInfoPage.test.js:13:19)

    (node:18876) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of
没有catch块或通过拒绝诺言的异步函数没有使用.catch（）处理。终止节点进程未处理的承诺被拒绝，请使用CLI标志 --unhandled-rejections=strict（请参阅 https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。（拒绝ID：1）（节点：18876）[DEP0018] DeprecationWarning：已弃用未处理的承诺拒绝。将来，承诺拒绝未处理将以非零退出终止Node.js进程代码。

如何使用Jest测试嵌套的React组件？

0 个答案: