Question

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

_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注入道具。

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

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的函数，您可以为其分配Promise.resolve()以执行更改状态的then函数。这基本上就是你正在测试的。

此外，您无法测试状态中的token更改，因为测试中的验证是在方法_onSubmit中的状态更改之前运行的。（您可以通过在两个位置放置console语句并查看哪个语句首先执行来检查这一点。

您需要做的是使用_onSubmit方法返回承诺。

_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调用函数来模拟提交事件，以便将您的验证放在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' })
    })
  })

ReactJS / Enzyme：如何测试一个提交函数，它通过prop调用graphQL变异

1 个答案: