CODEWITHSUNDEEP
reactjsjestjsenzyme
Shwetank
Shwetank

Reputation: 374

Props aren't passing inside component in test cases written with Jest and Enzyme

This is my test case

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);
  });
});

Whenever I run the test case using yarn test. It gives the following error TypeError: Cannot read property 'nav_module_id' of undefined.

I have already placed console at multiple places in order to see the value of props. It is getting set. But it couldn't just pass through the components and give the error mentioned above.

Any help would be appreciated been stuck for almost 2-3 days now.

Upvotes: 2

Views: 2034

Answers (1)

krishnamraju kammili
krishnamraju kammili

Reputation: 169

You have to wrap the component that you want to test in beforeEach method such that it becomes available for all the 'it' blocks, and also you have to take the mocked props that you think you are getting into the original component.

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)
    })
  })
})

Upvotes: 4

Related Questions