javascript - 如果调用日志，我如何进行单元测试

Question

我有这样的组件。它是另一个组件的包装组件。有onClick函数，如果是鼠标事件应该调用log

import log from './log';

export function withPressedLog(
    Component,
    options,
) {
    class WithPressedLogComponent extends React.Component {
        constructor(props) {
            super(props);
            this.onClick = this.onClick.bind(this);
        }

        public render() {
            const { ...props } = this.props;
            return <Component {...props} onClick={this.onClick} />;
        }

        private onClick(e) {
            if (this.props.onClick !== undefined) {
                this.props.onClick(e);
            }

            if (e) {
                this.props.log();
            }
        }
    }

    const mapDispatchToProps = {
        log: () => log(options),
    };

    return connect(
        undefined,
        mapDispatchToProps,
    )(WithPressedLogComponent);
}

我需要测试它是否调用了 this.props.log。我有一个单元测试，但它不起作用。我如何使用开 Jest 、 enzyme 来做到这一点？

it("should not log if has not mouse event", () => {
    const onClickMock = jest.fn();
    const logMock = jest.fn();
    const ButtonWithLog = withPressedLog(Button, {
        type: "BUTTON_PRESSED",
    });

    const subject = mountProvider(ButtonWithLog, { onClick: onClickMock, log: logMock });

    const mockedEvent = { target:{} };
    subject.find(ButtonWithLog).simulate("click", mockedEvent);

    expect(onClickMock.mock.calls).toHaveLength(1);
    expect(logMock.mock.calls).toHaveLength(0); // not works correctly, always return []

});

商店

const store = createStore(() => ({}));
const dispatchMock = jest.fn();
store.dispatch = dispatchMock;

mountProvider函数

function mountProvider(
    Component,
    props,
) {
    return mount(
        <Provider store={store}>
            <Component {...props} />
        </Provider>,
    );
}

Answer 1

我认为这里的问题在于您实际上是在测试连接的组件，而不是展开的组件。

尽量隔离您正在测试的组件。例如，您可以在连接的组件上使用 enzyme 的浅层包装器和 dive 方法，直接到达未包装的组件。

具体来说，您的问题可能是您的连接组件正在从商店获取 log Prop (通过 mapDispatchToProps)，但商店是模拟的，因此它不会工作。在您的测试中，您将一些模拟函数作为 prop 传递给组件，但一旦组件连接，引用就会丢失。

helpful thread on github