web-dev-qa-db-fra.com

Comment tester un gestionnaire d'événement React qui contient history.Push en utilisant Jest et Enzyme?

Étant donné un composant simple:

export default class SearchForm extends Component {
  constructor(props) {
    super(props)
    this.state = { query: '' }
  }
  onSubmit = (event) => {
    event.preventDefault()
    history.Push(`/results/${this.state.query}`, { query: this.state.query })
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          value={this.state.query}
          onChange={event => this.setState({ query: event.target.value })}
        />
        <button>Search</button>
      </form>
    )
  }
}

Et le test:

describe('SearchForm Component', () => {
  it('should navigate to results/query when submitted', () => {
    const wrapper = shallow(<SearchForm />)
    ...?
  })
})

Comment vérifiez-vous que la soumission du formulaire amène l'utilisateur à la page suivante avec la valeur de requête correcte?

J'ai essayé de simplement me moquer du gestionnaire onSubmit et au moins de confirmer qu'il a été appelé, mais cela entraîne une erreur de sécurité due à history.Push.

const wrapper = shallow(<SearchForm />)
const mockedEvent = { target: {}, preventDefault: () => {} }
const spy = jest.spyOn(wrapper.instance(), 'onSubmit')
wrapper.find('form').simulate('submit', mockedEvent)
expect(spy).toHaveBeenCalled()
reactjsunit-testingjestjsenzymehtml5-history
10
Darryl Snow

C'est en fait simple, vous pouvez passer n'importe quel accessoire au composant en le rendant peu profond à l'intérieur du test, comme ça:
const wrapper = shallow(<SearchForm history={historyMock} />)

Par ailleurs, dans onSubmit, vous devez appeler comme this.props.history.Push(...).

Maintenant, pour créer une maquette (plus d'informations dans le documentation ), vous pouvez écrire comme ceci dans le test:
const historyMock = { Push: jest.fn() };

Gardez à l'esprit que vous vous moquez uniquement de la méthode Push de l'objet history, si vous utilisez plus de méthodes à l'intérieur du composant et que vous souhaitez les tester, vous devez créer une maquette pour chacune testée .

Et puis, vous devez affirmer que la maquette Push a été appelée correctement. Pour ce faire, vous écrivez l'assertion nécessaire:
expect(historyMock.Push.mock.calls[0]).toEqual([ (url string), (state object) ]);
Utilisez le (url string) et (state object) à affirmer.

18
rodgobbi