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

如果您已经对酶进行了一些测试，那么可以在同一项目中使用这两个库。

如何使用酶的setProps（）测试组件

1 个答案: