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