How to unit test a method of react component?

Question

How to unit test a method of react component?

110.1k views Asked by bier hier At 24 November 2024 at 17:03

I am trying to unit test my reactjs component:

import React from 'react';
import Modal from 'react-modal';
import store from '../../../store'
import lodash from 'lodash'

export class AddToOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {checked: false}
    //debugger
  }
  checkBoxChecked() {
    return true
  }
  render() {
    console.log('testing=this.props.id',this.props.id )
    return (
      <div className="order">
        <label>
          <input
            id={this.props.parent}
            checked={this.checkBoxChecked()}
            onChange={this.addToOrder.bind(this, this.props)}
            type="checkbox"/>
          Add to order
        </label>
      </div>
    )
  }
}

export default AddToOrder;

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

Original Q&A

There are 3 answers

Or A. On 25 June 2018 at 08:05

For those who find the accepted answer as not working, try using .dive() on your shallow wrapper before using .instance():

expect(wrapper.dive().instance().somePrivateMethod()).toEqual(true);

Reference: Testing component methods with enzyme

captain-yossarian from Ukraine On 23 July 2018 at 08:40

Extend of previous answer. If you have connected component (Redux) , try next code :

 const store=configureStore();
  const context = { store };
   const wrapper = shallow(
      <MyComponent,
      { context },
    );
   const inst = wrapper.dive().instance();
   inst.myCustomMethod('hello');

**Swapnil** · Accepted Answer · 2016-12-17 08:09:41

Swapnil On 17 December 2016 at 08:09 BEST ANSWER

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

TechQA.

How to unit test a method of react component?

There are 3 answers

Related Questions in UNIT-TESTING

Related Questions in REACTJS

Related Questions in CHAI

Related Questions in ENZYME

Popular Questions

Popular Tags

Trending Questions