React.js - Simulating a click with Enzyme

Question

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

jmargolisvt · Accepted Answer · 2018-05-08 01:05:17Z

6

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.

answered May 8, 2018 at 1:05

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Elliot B. · Accepted Answer · 2018-05-08 01:15:29Z

4

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

edited May 8, 2018 at 1:15

answered May 8, 2018 at 1:10

Elliot B.

17.7k11 gold badges85 silver badges103 bronze badges

1 Comment

test Over a year ago

Sorry, my code on codesandbox is out of date. I did that anyway and nonetheless -- the same error persists.

klugjo · Accepted Answer · 2018-05-08 01:10:20Z

1

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

answered May 8, 2018 at 1:10

klugjo

21k10 gold badges65 silver badges83 bronze badges

Collectives™ on Stack Overflow

React.js - Simulating a click with Enzyme

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related