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

Question

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

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，酶来做到这一点？

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

我认为这里的问题是你实际上在测试连接的组件，而不是未包装的组件。

尝试隔离您正在测试的组件。 例如，您可以在连接的组件上使用酶的浅包装和dive方法，直接进入未包装的组件。

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

github上有用的线程