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。我有单元测试，但是不起作用。我怎么能用玩笑，酵素来做到这一点？

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

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

尝试隔离正在测试的组件。例如，您可以在连接的组件上使用酶的浅层包装和vector<Keypoint>方法来直接访问展开的组件。

具体来说，您的问题可能是您连接的组件正在从商店（通过dive获取log道具，但是商店被嘲弄了，所以它不起作用。在测试中，您将一些模拟功能作为道具传递给组件，但是一旦组件连接，该引用就会丢失。

helpful thread on github

我如何对是否调用日志进行单元测试

1 个答案: