ReactJS / Enzyme: how to test a submit function that calls a graphQL mutation through prop

Question

I am trying to write unit test (enzyme / joke) for this function:

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

But I do not know how to handle this.props.createUserMutation()for proper testing.

Of course, my current attempt is throwing an error TypeError: _this.props.createUserMutation is not a function

Unit test

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

---

Updated unit 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)does not give me token.

Answer 1

I assume that createUserMutationis entered into the details using the function compose.

So what you can do is import the non-default component into your test instead of “connected”.

import {CreateAccount} from './CreateAcount';

Then you can transfer createUserMutationas a property directly to the component when installing it.

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, . , .

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

, unit test, , 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' })
    })
  })