javascript - 我如何使用 enzyme 的 setProps() 测试组件

Question

//in my component i have 

{this.props.auth.isLoadding && 
   <p className='text-info positionMessage'>Is registring...</p>
}

//in my test i have 

it('should start a new component with set props', () => {
const props = {
    auth: {
        isAuth: false,
        isLoadding: false
    }
}
    const wrapper = shallow(<ScreensCreateAccount {...props}/>)

    wrapper.setProps({isLoadding: true})
    //here is code for testing if <p>...</p> appeared. how can i do this?
})

我的组件以 this.props.auth.isLoadding = false 开头，当将其更改为 true 时，html 也会更改，添加 <p className='text-info positionMessage'>Is registring...</p> .我如何使用浅层 enzyme 对其进行测试？

Answer 1

这是一个适用于您的代码的工作示例:https://codesandbox.io/s/r7owz8mykm

在您的代码中，您只是忘记了 json 中 prop isLoading 的授权级别。

{isLoadding: true}，而不是 {auth: {isLoadding: true} }

但是请注意，浅层渲染和 enzyme 可能不是测试 React 组件的正确工具。我用了一下，但现在我使用 react-testing-library :https://github.com/kentcdodds/react-testing-library我对此非常满意。我的测试现在更高级别并且可以像真实用户一样与我的组件交互。我可以在不破坏测试的情况下重构我的组件，使用 enzyme 编写这种测试并不容易。

我真的鼓励您至少阅读本文并发表您自己的意见。

https://blog.kentcdodds.com/why-i-never-use-shallow-rendering-c08851a68bb7

如果您已经使用 enzyme 进行了一些测试没问题，您可以在同一个项目中使用这两个库。