我有一个组件,当我在 componentDidMount()
中调用 setState()
时,该组件会触发重新渲染。这是示例代码:
import React from 'react'
class MyComponent extends React.Component {
constructor (props) {
super(props)
this.state = {
message: 'Hello'
}
}
componentDidMount () {
this.fetchMessage().then((message) => {
this.setState({ message })
})
}
fetchMessage() {
return Promise.resolve('World')
}
render() {
return this.state.message
}
}
我的测试是这样的:
import MyComponent from './MyComponent'
import { shallow } from 'enzyme'
describe('<MyComponent>', () => {
it('renders World', () => {
const wrapper = shallow(<MyComponent />)
expect(wrapper.text()).toEqual('World') # => results shows Hello
})
})
请注意,我正在使用 enzyme
来协助我的测试。
测试失败,因为返回的结果是Hello
,这是初始渲染。
所以我的问题是如何确保在执行断言之前触发重新渲染?
最佳答案
你好,
您必须使用mount
如果你想测试lifeCycleMethod。
请注意,setState 是异步的,因此如果 this.fetchMessage 需要时间,您会发现自己在渲染和测试中陷入了美丽的竞争条件。
为了避免这种情况,请尝试将渲染提取到无状态函数中。
关于javascript - 如何在React 16中测试componentDidMount()中setState()触发的重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47917185/