Как протестировать React useEffect крючки с жасмином и ферментом

Question

Я не могу найти, как вызывать мои хуки useEffect во время тестирования моего компонента.

Я пробовал несколько подобных решений, но это не сработало: https://reactjs.org/docs/test-utils.html#act

Мой компонент:

const mapDispatchToProps = (dispatch: IDispatch, ownProps: ITextAreaOwnProps): ITextAreaDispatchProps => ({
        onMount: () => dispatch(addTextArea(ownProps.id)),
});

export const TextArea = (props) => {
        React.useEffect(() => {
            props.onMount();
        }, []);

        // more code... //

        return (
            <>
                <TextareaTagName
                    {...props.additionalAttributes}
                    className={props.className}
                />
                {props.children}
                {getValidationLabel()}
            </>
        );
    };

Мой тест:

it('should call prop onMount on mount', () => {
    const onMount = jasmine.createSpy('onMount');

    mount(<TextArea id="textarea-id" onMount={onMount} />);

    expect(onMount).toHaveBeenCalledTimes(1);
});

Answer 1

Короткий ответ: вы не можете проверить это напрямую. В основном вам нужно активировать обнаружение изменений в вашем компоненте, чтобы активировать ловушку useEffect. Вы можете легко использовать библиотеку «act-dom / test-utils », выполнив что-то вроде этого

import { act } from 'react-dom/test-utils';
import { shallow, mount } from 'enzyme';

it('should call prop onMount on mount', () => {
  const onMount = jasmine.createSpy('onMount');

  const wrapper = mount(<TextArea id="textarea-id" onMount={onMount} />);

  act(() => {
    wrapper.update();
  });

  expect(onMount).toHaveBeenCalledTimes(1);

});

Answer 2

Что касается документации, useEffect должно обновляться при любом изменении реквизита.

1. Вы можете просто вызвать тест, используя другие реквизиты.
2. Вы можете издеваться над эффектом использования.

 /* mocking useEffect */
useEffect = jest.spyOn(React, "useEffect");
mockUseEffect(); // 2 times
mockUseEffect(); //

const mockUseEffect = () => {
       useEffect.mockImplementationOnce(f => f());
  };