Реквизиты не проходят внутри компонента в тестовых примерах, написанных с помощью Jest и Enzyme

Question

Это мой тестовый пример

import React from 'react';
import { mount } from 'enzyme';
import CustomForm from '../index';

describe('Custom Form mount testing', () => {
  let props;
  let mountedCustomForm;
  beforeEach(() => {
    props = {
      nav_module_id: 'null',
    };
    mountedCustomForm = undefined;
  });

  const customform = () => {
    if (!mountedCustomForm) {
      mountedCustomForm = mount(
        <CustomForm {...props} />
    );
    }
    return mountedCustomForm;
  };

  it('always renders a div', () => {
    const divs = customform().find('div');
    console.log(divs);
  });
});

Всякий раз, когда я запускаю тестовый набор, используя yarn test. Выдает следующую ошибку TypeError: Cannot read property 'nav_module_id' of undefined.

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

Любая помощь была бы оценена в течение почти 2-3 дней.

Answer 1

Вы должны обернуть компонент, который вы хотите протестировать в методе beforeEach, таким образом, чтобы он стал доступен для всех блоков it, а также вы должны взять поддельные реквизиты, которые, по вашему мнению, попадаете в исходный компонент.

import React from 'react'
import {expect} from 'chai'
import {shallow} from 'enzyme'
import sinon from 'sinon'
import {Map} from 'immutable'
import {ClusterToggle} from '../../../src/MapView/components/ClusterToggle'

describe('component tests for ClusterToggle', () => {

let dummydata

  let wrapper

  let props

  beforeEach(() => {

    dummydata = {
      showClusters: true,
      toggleClustering: () => {}
    }

    wrapper = shallow(<ClusterToggle {...dummydata} />)

    props = wrapper.props()

  })

  describe(`ClusterToggle component tests`, () => {

    it(`1. makes sure that component exists`, () => {
      expect(wrapper).to.exist
    })

    it('2. makes sure that cluster toggle comp has input and label', () => {
      expect(wrapper.find('input').length).to.eql(1)
      expect(wrapper.find('label').length).to.eql(1)
    })

    it('3. simulating onChange for the input element', () => {
      const spy = sinon.spy()
      const hct = sinon.spy()
      hct(wrapper.props(), 'toggleClustering')
      spy(wrapper.instance(), 'handleClusterToggle')
      wrapper.find('input').simulate('change')
      expect(spy.calledOnce).to.eql(true)
      expect(hct.calledOnce).to.eql(true)
    })
  })
})