javascript - JestJS:如何测试 catch() 的状态值

Question

我的组件Upload具有函数example()，它调用apollo graphQL突变(upload())。在调用突变之前，我将 isProcessing 状态设置为 true。如果失败，状态将设置回 false。

example ({ file }) {
  const { upload } = this.props
  this.setState({ isProcessing: true })

  upload({
    variables: { file }
  }).catch(err => {
    console.error(err)
    this.setState({ isProcessing: false })
  })
}

现在我正在尝试为失败的突变调用编写一个 jestJS 单元测试，这应该会导致 false 状态值:

我期望通过 catch() 调用将 isProcessing 状态设置为 false。但测试失败了，因为它仍然是 true:

it('should call mutation and fail', async () => {
  // SETUP
  const wrapper = shallow(<Upload />)
  wrapper.setState({ isProcessing: true })
  console.error = jest.fn()
  // EXECUTE
  await wrapper.instance().example(file)
  // VERIFY
  expect(wrapper.instance().state.isProcessing).toBe(false)
})

Answer 1

upload 返回一个 Promise，因此 Promise 必须从 example 返回，否则测试将不会等待它被实现。您的 await 当前正在接收 undefined 作为示例方法的返回值。

example ({ file }) {
  const { upload } = this.props
  this.setState({ isProcessing: true })

  return upload({   // HERE
    variables: { file }
  }).catch(err => {
    console.error(err)
    this.setState({ isProcessing: false })
  })
}