Проблема при тестировании вложенных компонентов в реакцию с ферментом Jestand

Question

Я использую дизайн муравьев в своем приложении и пытаюсь проверить свою форму, но я сбиваю с толку в использовании мелкого, монтирования и рендеринга из фермента и не могу получить доступ к внутренним компонентам. Например, это мой компонент формы, а затем я покажу вам свои тесты для него:

class AddPageForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      persianName: null,
      englishName: null,
      parent: null,
      accessGroup: [],
      moduleName: null
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = (e) => {
    this.setState({ [e.currentTarget.name]: e.currentTarget.value });
  };

  handleSubmit(values) {
    const { MakeApiCall } = this.props;
    const postPageUrl = `${API_URLS.Pages_List(i18next.language)}`;
    const token = config.getUser();
    const data = {
      translations: [
        {
          field: "title",
          language: "fa",
          text: values.persianName,
        },
      ],
      title: values.englishName,
      module: values.moduleName || "",
      parent: values.parent || null,
      access_groups: values.accessGroup,
    };
    MakeApiCall(postPageUrl, {
      method: "POST",
      headers: { authorization: `Bearer ${token}` },
      data: data,
    }).then(() => {
      const { successData, errorData } = this.props;
      if (successData !== null) {
        history.push('/page-management/available-pages')
      }
      if (errorData !== null) {
        console.log(errorData);
      }
    });
  }

  handleChangeAccess = (val) => {
    this.setState({ accessGroup: val });
  };

  render() {
    const { t, allAccesses, pagesList, isLoading } = this.props;
    const { Option } = Select;
    return (
      <Form
        name="normal_login"
        onFinish={this.handleSubmit}
        onFinishFailed={this.onFinishFailed}
      >
        <Row className="addPage__formRow">
          <Col md={12} xs={24}>
            <Form.Item
              label={t("PageManagement.nameFa")}
              name="persianName"
              rules={[
                {
                  required: true,
                  message: t("errors.required error")
                },
                {
                  pattern: RegExp.persianAlphabets,
                  message: t("errors.just persian"),
                  validateTrigger: ["onFinish"],
                }
              ]}
            >
              <Input
                name="persianName"
                placeholder=""
                onChange={(e) => this.handleChange(e)}
                type="text"
                required
                onBlur={this.onBlur}
                className="addPage__input"
              />
            </Form.Item>
          </Col>
          <Col md={12} xs={24} style={{ position: "relative" }}>
            <Form.Item
              className="d-flex"
              label={t("PageManagement.nameEn")}
              name="englishName"
              rules={[
                {
                  required: true,
                  message: t("errors.required error")
                },
                {
                  pattern: RegExp.englishAlphabets,
                  message: t("errors.just english"),
                  validateTrigger: ["onFinish"],
                }
              ]}
            >
              <Input
                name="englishName"
                placeholder=""
                onChange={(e) => this.handleChange(e)}
                type="text"
                required
                onBlur={this.onBlur}
                className="addPage__input"
              />
            </Form.Item>
            <span className="input-info">{t("PageManagement.nameEnInfo")}</span>
          </Col>
        </Row>
        <Row className="addPage__formRow mt-3">
          <Col md={12} xs={24}>
            <Form.Item
              label={t("PageManagement.parent")}
              name="parent"
            >
              <Select
                className={`addPage__input ${
                  i18next.language === "fa" ? "mr-3" : ""
                  }`}
                name="parent"
                loading={isLoading}
                onChange={(value, e) => {
                  this.setState({ parent: value });
                }}
              >
                <Option>-</Option>
                {pagesList && pagesList.map(item => <Option key={item.id} value={item.id}>{item.title}</Option>)}
              </Select>
            </Form.Item>
          </Col>
          <Col md={12} xs={24}>
            <Form.Item
              className="d-flex"
              label={t("PageManagement.access")}
              name="accessGroup"
              rules={[{
                required: true,
                message: t("errors.required error")
              }]}
            >
              <Select
                className="addPage__input"
                name="accessGroup"
                mode="multiple"
                rules={[{ required: true }]}
                onChange={(value) => this.handleChangeAccess(value)}
              >
                {allAccesses && allAccesses.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row className="addPage__formRow mt-3">
          <Col span={24}>
            <Form.Item
              label={t("PageManagement.moduleName")}
              name="moduleName"
            >
              <Select
                className={`addPage__input ${
                  i18next.language === "fa" ? "mr-3" : ""
                  }`}
                name="module"
                onChange={(value) => {
                  this.setState({ moduleName: value });
                }}
              >
                <Option value="-">ندارد</Option>
                <Option key="faq" value="faq">
                  {t("PageManagement.FAQ")}
                </Option>
                <Option key="comments" value="comments">
                  {t("PageManagement.Comments and suggestions")}
                </Option>
                <Option key="cards" value="cards">
                  {t("PageManagement.Cards")}
                </Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row className="mt-5">
          <Col xs={24} className="d-flex justify-content-center">
            <Button
              shape="round"
              htmlType="submit"
              size="large"
              className="addPage__submitBtn"
            >
              {t("PageManagement.addBtn")}
            </Button>
          </Col>
        </Row>
        <Row>
          <Col
            xs={24}
            className="d-flex justify-content-center addPage__textWrapper"
          >
            <p className="d-flex align-items-center">
              <InfoCircleOutlined className="px-1" />
              <span>{t("PageManagement.addPageInfo")}</span>
            </p>
          </Col>
        </Row>
      </Form>
    );
  }
}

AddPageForm.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  pagesList: PropTypes.array.isRequired,
  allAccesses: PropTypes.array.isRequired
}

export default withNetwork(withTranslation()(AddPageForm));

Test File:

import React from 'react';
import { findComponentByAttr, checkProps } from '../../testUtils';
import AddPageForm from '../../Container/PageManagement/AddPage/Components/AddPageForm';
import { shallow, render, mount } from 'enzyme';
import { Select, Input } from "antd";
import Form from 'antd/lib/form/Form';
import  checkPropTypes  from 'check-prop-types';
const { Option } = Select;

const defaultProps = { isLoading: false, pagesList: [{ id: 1, title: 'contact us' }, { id: 2, title: 'faq' }], allAccesses: [{ id: 1, name: 'admin' }, { id: 2, name: 'user' }] }
const renderSetup = (props = {}) => {
  const setupProps = { ...defaultProps, ...props };
  const wrapper = render(<AddPageForm {...setupProps} />)
  return wrapper;
}
const shallowSetup = (props = {}, state = null) => {
  const setupProps = { ...defaultProps, ...props };
  const wrapper = shallow(<AddPageForm {...setupProps} />)
  if (state) wrapper.setState(state);
  return wrapper;
}
const mountSetup = (props = {}, state = null) => {
  const setupProps = { ...defaultProps, ...props };
  const wrapper = mount(<AddPageForm {...setupProps} />)
  if (state) wrapper.setState(state);
  return wrapper;
}

export const checkProps = (component, conformingProps) => {
  const propError = checkPropTypes(component.propTypes, conformingProps, 'prop', component.name);
  expect(propError).toBeUndefined();
}

describe('Add Page Tests', () => {
  beforeAll(() => {
    Object.defineProperty(window, 'matchMedia', {
      writable: true,
      value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      })),
    });
  })
  test('form mounted correctly', () => {
    //road1
    const wrapper = mountSetup();
    const elem = wrapper.find(Form);
    expect(elem.exists()).toBe(true);
    //road2
    const wrapper2 = shallowSetup();
    const elem2 = wrapper2.find(Form);
    expect(elem2).toBeDefined();
  });
  test('test prop types', () => {
    checkProps(AddPageForm, defaultProps);
  });
  // test('expected lenght of elements', () => {
  //   const wrapper = mountSetup();
  //   const inputs = wrapper.find('Input');
  //   const selects = wrapper.find('Select');
  //   expect(inputs).toHaveLength(2);
  //   expect(selects).toHaveLength(3);
  // })
  test('testing handle change access', () => {
    //road1
    const wrapper = mountSetup({}, { accessGroup: null });
    // const instance = wrapper.instance();
    // const spy = jest.spyOn(instance, "handleChangeAccess");
    // instance.handleChangeAccess([1]);
    // expect(spy).toHaveBeenCalledTimes(1);
    //road2
    // const accessSelect = wrapper.find('Select').at(1);
    // console.log(accessSelect.props())
    // accessSelect.simulate('change', {value: [1]});
    // expect(accessSelect.props().value).toBe([1]);
    // wrapper.instance().handleChangeAccess([1]);
    // expect(wrapper.state().accessGroup).toBe([1]);
  })
  test('snapshot testing with props', () =>{
    const wrapper = shallowSetup();
    expect(wrapper).toMatchSnapshot();
  })
  test('snapshot testing without props', () =>{
    const wrapper = shallow(<AddPageForm />)
    expect(wrapper).toMatchSnapshot();
  })
  // test('test select access onChange event', () => {
  //   const onChange = jest.fn();
  //   const value = [1,2];
  //   const wrapper = setup({onChange});
  //   // const wrapper = setup();
  //   const elem = findComponentByAttr(wrapper, 'select-access');
  //   // elem.simulate('change', {target:{value}});
  //   elem.prop('onChange', {target:{value}});
  //   // expect(wrapper.state.accessGroup).toBe([1,2]);
  //   expect(onChange).toBeCalledWith(value);
  // });
  // test('all access options length correct', () => {
  // const wrapper = mountSetup();
  // const elem = wrapper.children(Select).at(0);
  // expect(elem.children(Option).length).toBe(defaultProps.pagesList.length + 1);
  // expect(elem.find(Option)).to.have.lengthOf(defaultProps.pagesList.length);
  // expect(elem.find(Option)).toHaveLength(defaultProps.pagesList.length);
  // });
  // test('form mounted correctly', () => {
  //   const wrapper = setup();
  //   const elem = findComponentByAttr(wrapper, 'access-option');
  //   expect(elem.length).toBe(defaultProps.allAccesses.length);
  // });
  // test('test persian name input change', () => {
  //   const wrapper = mountSetup();
  //   const elem = wrapper.find(Input).at(0);
  //   let defaultPrevented = false;
  //   elem.simulate('change', {target: {value: 'نام صفحه'}, preventDefault: () => {defaultPrevented = true}})
  //   expect(wrapper.state.persianName).toContain('صفحه');
  //   expect(defaultPrevented).toBe(true);
  // });
});

например, как я могу проверить значение и длину моих параметров allAccesses ? Может ли кто-нибудь мне в этом помочь?