reactjs - 如何用 jasmine 和 enzyme 测试 React useEffect hooks

Question

在测试我的组件时，我找不到如何调用我的 useEffect Hook 。

我尝试了几个类似的解决方案，但没有奏效: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 应该在任何 Prop 更改时更新。

1. 您可以使用其他 Prop 来记忆测试。
2. 可以模拟使用效果。

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

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