Есть ли способ модульного тестирования недоступной функции обратного вызова, которая вызывается из дочернего компонента React с использованием jest - PullRequest
Новая
       3

Есть ли способ модульного тестирования недоступной функции обратного вызова, которая вызывается из дочернего компонента React с использованием jest

0 голосов
/ 16 марта 2020

Я тестирую модуль React 16, который определяет обратный вызов и передает его как свойство следующему компоненту, который вызывается при срабатывании события click. 

import React from 'react'

function OuterComponent() {

  const handleClick = useCallback(() => {
    openDialog() // <--- This code is inaccessible from my "OuterComponent.test.js" unit test 
  }

  return <MyDialog clickHandler={handleClick} />
}
export default OuterComponent

Я ищу 100% тестовое покрытие и хотел бы смоделировать все другие компоненты / функции, используя jest, которые не являются частью компонента "OuterComponent".

Проблема, с которой я столкнулся, заключается в том, что я не могу высмеять компонент MyDialog , чтобы он вызывал функцию handleClick .

Я также пытался смоделировать компонент, используя этот фрагмент, но он все еще пытается загрузить все импортированные файлы из MyDialog 

jest.doMock('components/MyDialog', () => {
    return () => () => <div />
})
//... other mocks along with **openDialog**

//...and in my describe/it...
MyDialog.mockImplementation(() => {})

OuterComponent().handleClick()
expect(openDialog).toHaveBeenCalled()

Я надеялся, что я может отобразить пустой div для MyDialog и просто вызвать функцию handleClick , чтобы проверить его. Кто-нибудь знает, что я могу делать не так, или есть другие идеи, как это проверить?

1 Ответ

0 голосов
/ 17 марта 2020

Я не думаю, что вы можете издеваться над вар в закрытии. Лучшее, что вы можете сделать, это что-то в этом роде: 

import { fireEvent, render } from 'react-testing-library';

jest.mock(
  'components/MyDialog',
  () => ({ clickHandler }) => (
    <button
      onClick={clickHandler}
      test-id="button"
    >
      Click me
    </button>
  ),
);

it('should call clickHandler', () => {
  const onClick = jest.fn(() => null);
  const { queryByTestId } = render(<MyDialog clickHandler={onClick} />);
  fireEvent.click(queryByTestId('button'));
  expect(onClick.toHaveBeenCalledTimes(1));
});

Вы фактически проверяете способность MyDialog визуализировать что-то, что может выполнить обратный вызов.

...