Как протестировать вложенные компоненты React с помощью Jest?

Question

Как тестировать вложенные компоненты React с помощью Jest?

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

asyn c функция без блока catch или отклонение обещания, которое не было обработано с помощью .catch (). Чтобы завершить процесс узла при отклонении необработанного обещания, используйте флаг CLI --unhandled-rejections=strict (см. https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (идентификатор отклонения: 1) (узел: 18876) [DEP0018] Предупреждение об устаревании: отклонения необработанного обещания устарели. В будущем отклонения обещаний, которые не обрабатываются, завершат процесс Node.js с ненулевым кодом завершения.