ReactJS / Enzyme：如何测试提交函数，该函数通过prop调用graphQL突变

Question

我正在尝试为此功能编写单元测试（酶/玩笑）：

_onSubmit = (event) => {
  event.preventDefault()
  const { username, password } = this.state

  this.props.createUserMutation({
    variables: { username, password }
  }).then(response => {
    const token = response.data.createUser.token
    if (token) {
        this.setState({ token })
    }
  }).catch(error => {
    console.warn(error)
  })
}

但是我不知道如何处理this.props.createUserMutation()进行正确的测试。

当然，我当前的尝试会引发TypeError: _this.props.createUserMutation is not a function错误

单元测试

it('_onSubmit() should submit form and reset state object', () => {
  const wrapper = shallow(<CreateAccount />)
  wrapper.setState({ username: 'Username', password: 'Password' })
  wrapper.find(Form).simulate('submit', {
    preventDefault: () => {}
  })
  const state = wrapper.instance().state
  expect(state).toEqual({ token: 'test' })
})

---

更新了单元测试

it('_onSubmit() should submit data and get result dataset', () => {
    const createUserMutation = () => {
      return Promise.resolve({
        data: {
          createUser: { token: 'token' }
        }
      })
    }
    const wrapper = shallow(<CreateAccount createUserMutation={createUserMutation} />)
    wrapper.find(Form).simulate('submit', {
      preventDefault: () => {}
    })
    const state = wrapper.instance().state
    expect(state).toEqual({ token: 'token' })
  })

console.log(state)没有给我token 。

Answer 1

我假设createUserMutation由compose函数注入到props中。

因此，您可以做的是在测试中导入非默认组件，而不是“连接的”组件。

import {CreateAccount} from './CreateAcount';

然后，您可以在安装组件时将createUserMutation作为道具直接传递给组件。

it('_onSubmit() should submit form and reset state object', () => {
  const createUserMutation = () => {
      return Promise.resolve({
           username: '',
           password: ''
         });
  };
  const wrapper = shallow(<CreateAccount createUserMutation={createUserMutation} />)
   ...
});

假设createUserMutation似乎是一个返回诺言的函数，可以将其分配给Promise.resolve()以便执行then函数来更改状态。 基本上，这就是您要测试的内容。

此外，由于在方法_onSubmit状态更改之前正在运行测试中的验证，因此您无法测试状态中的token更改。 （您可以通过将console语句放在两个位置来检查此情况，并查看哪个先执行）。

您需要做的是在_onSubmit方法中返回promise。

_onSubmit = (event) => {
  event.preventDefault()
  const { username, password } = this.state

  return this.props.createUserMutation({   // returning the promise
    variables: { username, password }
  }).then(response => {
    const token = response.data.createUser.token
    if (token) {
        this.setState({ token })
    }
  }).catch(error => {
    console.warn(error)
  })
}

然后，在单元测试中，您需要通过直接从props调用函数来模拟Submit事件，以便将验证放入then函数中。 这样，您将在状态更改后运行您的expect语句。

it('_onSubmit() should submit data and get result dataset', () => {
    const createUserMutation = () => {
      return Promise.resolve({
        data: {
          createUser: { token: 'token' }
        }
      })
    }
    const wrapper = shallow(<CreateAccount createUserMutation={createUserMutation} />)
    wrapper.find(Form).props().onSubmit({
      preventDefault: () => {}
    }).then(() =< {
       const state = wrapper.instance().state
       expect(state).toEqual({ token: 'token' })
    })
  })