Функция фермента React jest называется тестом - PullRequest
Новая
       12

Функция фермента React jest называется тестом

1 голос
/ 27 мая 2020

Привет, у меня есть простой компонент, который мне нужно протестировать:

MyComponent. js ----- 

import React from 'react';
const MyComponent = (props) => {

  onClickHandler = () => {
     console.log('clicked');
     props.outsideClickHandler();
  }

  return (
     <div>
        <span className='some-button' onClick={onClickHandler}></span>
     </div>
  );
}

MyComponent.test. js ---- 

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
    const onClickHandler = jest.fn();

    it('calls click event', () => {
      const wrapper = shallow(<MyComponent />);
      wrapper.find('.some-button').simulate('click');
      expect(onClickHandler.mock.calls.length).toEqual(1);  // tried this first
      expect(onClickHandler).toBeCalled(); // tried this next
    });
});

Пробовал два вышеупомянутых типа ожидания, мое значение журнала консоли приходит 

console.log('clicked'); comes

, но мой тест не проходит, и я получаю следующее: 

expect(received).toEqual(expected) // deep equality

Expected: 1
Received: 0

1 Ответ

1 голос
/ 27 мая 2020

Итак, проблема с вашим кодом заключается в том, что когда вы моделируете событие click, вы ожидаете, что будет вызвана полностью независимая фиктивная функция. Вам нужно прикрепить к компоненту функцию mock. Лучше всего использовать prototype. Примерно так: 

it('calls click event', () => {
  MyComponent.prototype.onClickHandler = onClickHandler; // <-- add this line
  const wrapper = shallow(<MyComponent />);
  wrapper.find('.some-button').simulate('click');
  expect(onClickHandler.mock.calls.length).toEqual(1);
  expect(onClickHandler).toBeCalled();
  expect(onClickHandler).toHaveBeenCalledTimes(1); // <-- try this as well
});

Обратитесь к этой проблеме для получения дополнительных потенциальных решений.

...