mock click event и использование toBeCalled () получило ошибку, а не ошибку функции - PullRequest
Новая
       17

mock click event и использование toBeCalled () получило ошибку, а не ошибку функции

0 голосов
/ 13 декабря 2018

Это моя попытка проверить событие нажатия кнопки 

it('should call addItem when button is clicked', () => {
    const addItem = jest.fn()
    const button = mount(<App onClick={addItem} />)
    //button.find('button').props.onClick()
    //expect(addItem).toBeCalled()
  })

Это DOM 

<div className="App">
        <input type="text" onChange={this.changeInput} />
        <button onClick={this.addItem}>Add</button>
      </div>

В чем ошибка?

1 Ответ

0 голосов
/ 13 декабря 2018

Что проверить:

Проверьте, вызывается ли функция addItem при нажатии кнопки add.

Почему проверка не прошла:

Вы издевались не над той функцией .addItem - это функция instance, определенная в вашем классе, но вы тестируете функцию, которую вы вместо этого передали в качестве компонента prop.

Как проверить функцию / метод, определенный в вашем компоненте:

Либо вы хотите посмотреть, как вызывается метод, но сохранить исходную реализацию или смоделировать реализацию, но восстановить оригинал позже, после запуска теста, тогда вы можете использовать jest.spyOn для любого из двух.

Если вы хотели только «шпионить» за вызовами функции addItem, но оставить исходную реализацию на месте, то вы можете сделать это следующим образом. 

it("should call addItem when button is clicked", () => {
  const spy = jest.spyOn(App.prototype, "addItem");
  const wrapper = shallow(<App />);
  wrapper.find("button").simulate("click");

  expect(spy).toHaveBeenCalled();
  // don't forget to clear the spy
  spy.mockClear();
});

Если вы действительно хотите смоделировать функцию, а затем восстановить первоначальную реализацию, то вы можете сделать это. 

it("should call addItem when button is clicked", () => {
    const mocked = jest.spyOn(App.prototype, "addItem");
    // override the implementation
    mocked.mockImplementation(() => "mock");
    const wrapper = shallow(<App />);

    wrapper.find("button").simulate("click");
    expect(mocked).toHaveBeenCalled();

    mocked.mockRestore();
  });

См. Рабочую реализацию: https://codesandbox.io/s/mm06k8px4y

Обратите внимание, что в коде я изменил реализацию addItem , связав вручнуюк классу вместо использования функций со стрелками (свойства класса) , поскольку нам нужно, чтобы эта функция была в прототипе класса для упрощения тестирования.В противном случае это привело бы к этой ошибке: Cannot read property '_isMockFunction' of undefined, поскольку ее нет в прототипе класса.

Также «свойства класса» все еще являются экспериментальными и не являются частью ES6.

См. Этодля более подробной информации: https://github.com/facebook/react/issues/9851

...