React.js - Имитация клика с помощью фермента

Question

У меня есть это приложение React.js, которое является простым приложением корзины. https://codesandbox.io/s/znvk4p70xl

Проблема в том, что я пытаюсь выполнить модульное тестирование состояния приложения с использованием Jest и Enzyme, но, похоже, оно не работает. Вот мой Todo.test.js модульный тест:

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

});

Когда я запускаю тест, корзина все еще говорит то же самое, когда должен быть добавлен элемент Pink.

Как это может быть, если я смоделировал нажатие кнопки на методе addToCart?

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

Answer 1

Вы пытаетесь смоделировать щелчок по элементу с классом addtocart. Однако у вас нет элемента с классом addtocart. Ваша кнопка добавления имеет идентификатор элемента submit.

Изменить это:

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

К этому:

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

Answer 2

После просмотра вашего Todo кода:

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

и

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

Я не думаю, что wrapper.find('.cost') сработает. Я предлагаю вам сделать wrapper.find('#cost')

Answer 3

Фермент simulate ищет событие onChange в компоненте Todo, но не находит его. Вы не указали onChange в качестве реквизита, поэтому будет иметь смысл, что он не срабатывает. Подсоедините опору onChange к компоненту, если вы хотите его протестировать. Из документов:

Даже если название подразумевает, что это имитирует реальное событие, .simulate () на самом деле нацелен на опору компонента, основываясь на событие, которое вы даете. Например, .simulate ('click') фактически получит onClick опора и вызвать его.