I have this React.js app that is a simple Cart app.

The problem is I am trying to unit test the state of the application using Jest and Enzyme but it does not seem to work. Here is my Todo.test.js unit test:

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

test('Test it', async () => {
  // Render a checkbox with label in the document
  const cart = [
    { name: 'Green', cost: 4 },
    { name: 'Red', cost: 8 },
    { name: 'Blue', cost: 14 }
  ];

  const wrapper = mount(<Todo cart={cart} />);
  const firstInput = wrapper.find('.name');
  firstInput.simulate('change', { target: { value: 'Pink' } });

  const firstCost = wrapper.find('.cost');
  firstCost.simulate('change', { target: { value: 200 } });

  const submitButton = wrapper.find('.addtocart');
  submitButton.simulate('click');

  wrapper.update();

  expect(wrapper.state('price')).toBe(26);

  console.log(wrapper.state());
  console.log(wrapper.props().cart);

});

When I run the test, the cart still says the same thing when the item Pink should have been added.

How can this be when I have simulated a button click on the addToCart method?

 PASS  src/__tests__/todo.test.js
  ● Console
    console.log src/__tests__/todo.test.js:32      { price: 26 }    
console.log src/__tests__/todo.test.js:33      [ { name: 'Green', cost: 4 },        { name: 'Red', cost: 8 },        { name: 'Blue', cost: 14 } ]

I have this React.js app that is a simple Cart app. https://codesandbox.io/s/znvk4p70xl

The problem is I am trying to unit test the state of the application using Jest and Enzyme but it does not seem to work. Here is my Todo.test.js unit test:

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

test('Test it', async () => {
  // Render a checkbox with label in the document
  const cart = [
    { name: 'Green', cost: 4 },
    { name: 'Red', cost: 8 },
    { name: 'Blue', cost: 14 }
  ];

  const wrapper = mount(<Todo cart={cart} />);
  const firstInput = wrapper.find('.name');
  firstInput.simulate('change', { target: { value: 'Pink' } });

  const firstCost = wrapper.find('.cost');
  firstCost.simulate('change', { target: { value: 200 } });

  const submitButton = wrapper.find('.addtocart');
  submitButton.simulate('click');

  wrapper.update();

  expect(wrapper.state('price')).toBe(26);

  console.log(wrapper.state());
  console.log(wrapper.props().cart);

});

When I run the test, the cart still says the same thing when the item Pink should have been added.

How can this be when I have simulated a button click on the addToCart method?

 PASS  src/__tests__/todo.test.js
  ● Console
    console.log src/__tests__/todo.test.js:32      { price: 26 }    
console.log src/__tests__/todo.test.js:33      [ { name: 'Green', cost: 4 },        { name: 'Red', cost: 8 },        { name: 'Blue', cost: 14 } ]

• javascript
• reactjs
• enzyme

3 Answers 3

Enzyme's simulate is looking for an onChange event on your Todo component, and it's not finding one. You don't have onChange specified as a prop, so it would make sense that it's not triggering. Wire up the onChange prop to your component if this is the way you want to test it. From the docs:

Even though the name would imply this simulates an actual event, .simulate() will in fact target the component's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

You are attempting to simulate a click on an element with class addtocart. However, you don't have an element with class addtocart. Your add button has an element ID of submit.

Change this:

const submitButton = wrapper.find('.addtocart');

To this:

const submitButton = wrapper.find('#submit');

After looking at your Todo code:

<input id="itemname" name="name" ref={this.nameRef} className="form-control" type="text" placeholder="Add item to List" />

and

<input name="cost" id="itemcost" ref={this.costRef} className="form-control" size="5" type="text" placeholder="Cost" />

I don't think wrapper.find('.cost') will work. I suggest you do wrapper.find('#cost')