How to unit test a method of react component?

unit-testing reactjs chai enzyme
bier hier picture bier hier · Dec 17, 2016 · Viewed 51.4k times · Source

I am trying to unit test my reactjs component:

Just to get started I am already struggling to assert the checkBoxChecked method:

import React from 'react-native';
import {shallow} from 'enzyme';
import {AddToOrder} from '../app/components/buttons/addtoorder/addtoorder';
import {expect} from 'chai';
import {mount} from 'enzyme';
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.document = doc
global.window = doc.defaultView

let props;
beforeEach(() => {
  props = {
    cart: {
      items: [{
        id: 100,
        price: 2000,
        name:'Docs'
      }]
    }
  };
});

describe('AddToOrder component', () => {
  it('should be handling checkboxChecked', () => {
    const wrapper = shallow(<AddToOrder {...props.cart} />);
    expect(wrapper.checkBoxChecked()).equals(true); //error appears here
  });
});

```

How can I unit test a method on the component? This is the error I am getting:

TypeError: Cannot read property 'checked' of undefined

Answer

Swapnil picture Swapnil · Dec 17, 2016

You are almost there. Just change your expect to this:

expect(wrapper.instance().checkBoxChecked()).equals(true);

You can go through this link to know more about testing component methods using enzyme

Related questions

Enzyme - How to access and set <input> value?

I'm confused about how to access <input> value when using mount. Here's what I've got as my test: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.…

Read More
How to mock an exported const in jest

I have a file that relies on an exported const variable. This variable is set to true but if ever needed can be set to false manually to prevent some behavior if downstream services request it. I am not sure …

Read More
Using Jest to mock a React component with props

I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this: import ComponentToMock from './ComponentToMock'; <…

Read More