如何在开玩笑的单元测试中处理 .then 和 .catch

Question

我正在对 apollo 客户端使用 react，并且我正在尝试测试一个需要 graphQL 突变的函数。由于这是函数的单元测试，我不想测试突变。 所以我需要模拟突变。这是我的功能：

changeContent (event) {
  const { content } = this.state
  const { id, language, changeMutation, t } = this.props

  changeMutation({
    variables: {
      id,
      content
    },
    refetchQueries: [{
      query: getContent,
      variables: {
        id,
        language
      }
    }]
  }).then(response => {
    this.setState({ content: response.data.changeContent.content })
  }).catch(error => {
    this.setState({ content })
    console.error(error)
    toast.error(t('error:content'))
  })
}

这就是我开始测试它的方式：

it('changeContent() should call mutation', () => {
  // SETUP
  const initial = 'Initial value'
  const new = 'New value'
  wrapper = shallow(<Content
    id='123'
    language='en'
    t={jest.fn()}
    changeMutation={jest.fn()}
  />)
  wrapper.setState({ content: initial })
  // EXECUTE
  wrapper.instance().changeContent()
  // VERIFY
  expect(wrapper.instance().state.content).toEqual(new)
})

但我不明白如何处理then 和catch。

Answer 1

我认为您在这里有两个可能的期​​望：

1. 当 changeMutation 的承诺得到解决时。
2. 当来自 changeMutation 的承诺被拒绝时。

所以你可以测试你的预期行为，为每个预期做两个测试，并正确模拟每个测试的 changeMutation 可能是这样的：

承诺解决时：

    it('changeContent() should call mutation', async () => {
  // SETUP
  const initial = 'Initial value'
  const new = 'New value'
  wrapper = shallow(<Content
    id='123'
    language='en'
    t={jest.fn()}
    changeMutation={jest.fn(()=>Promose.resolve(yourExpectedResponse)}
  />)
  wrapper.setState({ content: initial })
  // EXECUTE
 await wrapper.instance().changeContent()
  // VERIFY
  expect(wrapper.instance().state.content).toEqual(new)
})

以及当 changeMutation 的承诺被拒绝时。

it('changeContent() should call mutation', async () => {
  // SETUP
  const initial = 'Initial value'
  const new = 'New value'
  wrapper = shallow(<Content
    id='123'
    language='en'
    t={jest.fn()}
    changeMutation={jest.fn(()=>Promose.reject(yourExpectedError´)}
  />)
  wrapper.setState({ content: initial })
  // EXECUTE
  await wrapper.instance().changeContent()
  // VERIFY
  expect(wrapper.instance().state.content).toEqual(initial)
})

如果这是您的要求，请告诉我