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' })
    })
  })