Question

我正在为我的React App前端使用Enzyme和Jest编写单元测试。当我尝试渲染登录屏幕时，在尝试进行mount（）渲染时看不到我正在传递的一些道具。浅呈现效果很好，我能够测试我的componentDidMount和componentWillReceiveProps方法。

我尝试了多种渲染方式。结合使用Provider的mount（），通过硬代码传递道具。似乎没有任何效果。

以下是有效测试，并且是坏测试。第一个工作正常，但是安装测试失败：

我正在通过这些道具：

let props = {
    actions: mockProps.actions,
    auth: {
        isAuthenticated: false,
        isFetching: false
    },
    history: mockProps.history,
    location: {
        pathname: "/login",
        search: "",
        hash: "",
        key: "0m32x8"
    },
    match: mockProps.match
}

mockProps是一个json文件，带有来自Chrome的React Dev Tool的示例道具。

// Working Shallow Rendered Test
it('componentWillReceiveProps', () => {
    const componentWillReceivePropsSpy = jest.spyOn(Login.prototype, 'componentWillReceiveProps')
    shallowWrapper.setProps({ location: { search: "testing" } })
    expect(componentWillReceivePropsSpy).toHaveBeenCalled()
})

// Broken Mount Rendered Test
it('Mount Test', () => {
    mount(<Provider store={store}><Login {...props}/></Provider>)
})

当组件尝试在此处设置初始状态时发生错误：

state = {
    shouldRedirect: false,
    errorShown: false,
    fields: {
        username: '',
        password: ''
    },
    token: q.parse(this.props.location.search).token,
    fieldErrors: {}
};

找不到this.props.location.search。

Answer 1

使用高阶组件时，最好也导出基本组件（在包装之前），这样我们可以不用包装就进行测试，而只需为所需的提供程序传递模拟。

我遇到了同样的问题，这就是我的解决方法！

为什么在安装渲染时我的道具没有传递到我的组件中？

1 个答案: