javascript - 如何在React 16中测试componentDidMount()中setState()触发的重新渲染

Question

我有一个组件，当我在 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，这是初始渲染。

所以我的问题是如何确保在执行断言之前触发重新渲染？

Answer 1

你好，

您必须使用mount如果你想测试lifeCycleMethod。

请注意，setState 是异步的，因此如果 this.fetchMessage 需要时间，您会发现自己在渲染和测试中陷入了美丽的竞争条件。

为了避免这种情况，请尝试将渲染提取到无状态函数中。