Тестирование функции изменения ручки в React с использованием Enzyme и Jest - PullRequest
Новая
       14

Тестирование функции изменения ручки в React с использованием Enzyme и Jest

0 голосов
/ 28 февраля 2019

Мой компонент реагирования содержит этот код 

 handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
        </button>
      </div>
    );
  }
}

Как видите, функция handleChange срабатывает при изменении входа и оттуда обновляет состояние.

Как я могу проверить это с помощью энзима?Я пробовал 

 it("Updates the state", () => {
     const wrapper = shallow(
       <Provider store={store}>
         <DeleteOne />
       </Provider>
     );
     const input = wrapper.find("input");

     input.simulate("change", { target: { num: 2} });

     expect(wrapper.state().num).toEqual(2);
   });
});

Мне пришлось попытаться обернуть его в магазине, потому что я использую Redux и экспортирую подключенный компонент.Я гуглил последний час и пробовал все виды, но не смог пройти этот тест.Пожалуйста, пришлите помощь :) cheers

PS: я проверял нажатие кнопки, не беспокойтесь, так как она просто запускает функцию (без обновления состояния).

1 Ответ

0 голосов
/ 01 марта 2019

Обычно я экспортирую как подключенный компонент для использования в приложении, так и сам компонент для тестирования.

Похоже, у вас есть небольшая опечатка, передайте { target: { value: 2 } } как ваше событие.

Вот рабочий пример на основе предоставленного вами кода: 

import * as React from 'react';
import { shallow } from 'enzyme';

class DeleteOne extends React.Component {

  handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
      </button>
      </div>
    );
  }
}

it("Updates the state", () => {
  const wrapper = shallow(<DeleteOne />);
  const input = wrapper.find("input");
  input.simulate("change", { target: { value: 2 } });  // 'value' instead of 'num'
  expect(wrapper.state().num).toEqual(2);  // SUCCESS
});
...