如何使用酶的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>。我如何使用酶的浅层测试呢？

Answer 1

这是一个坚持您的代码的工作示例：https : //codesandbox.io/s/r7owz8mykm

在您的代码中，您只是忘记了属性isLoading的json中的身份验证级别。

{isLoadding: true}， 代替 {auth: {isLoadding: true} }

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

我真的鼓励您至少阅读此书并发表自己的看法。

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

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