web-dev-qa-db-fra.com

Comment puis-je tester correctement les événements de changement d'entrée avec Enzyme?

J'essaie Jest/Enzyme et j'ai du mal avec un exemple simple que j'essaie de créer.

J'ai un petit composant avec une entrée qui devrait mettre à jour le texte d'un DIV. Je veux écrire un test prouvant que le DIV a été mis à jour.

Mon test est simplement le suivant:

const app = shallow(<App {...state} />);
const input = app.find('input');

input.simulate('keyDown', {keyCode: 72});
input.simulate('keyDown', {keyCode: 73});
input.simulate('change', {target: input});

expect(app.find('[test="mirror"]').text()).toEqual('hi');

Je sais que l'entrée renvoie en fait un ShallowWrapper. Vous pouvez voir dans mon composant ci-dessous, je mets à jour l'état en regardant e.target.value. Existe-t-il un moyen de passer le nœud DOM réel à ma simulation de change? La simulation du keyDown mettra-t-elle réellement à jour la valeur d'entrée? Ou dois-je le faire d'une manière différente?

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mirror: ''
    };
    this.updateMirror = this.updateMirror.bind(this);
  }

  updateMirror(e) {
    let val = e.target.value;
    this.setState((prevState, props) => {
      return {
        mirror: val
      };
    });
  }

  render() {
    return <div>
      <div><input type="text" onChange={this.updateMirror} /></div>
      <div test="mirror">{this.state.mirror}</div>
    </div>
  }
}
export default App
reactjsjestjsenzyme
8
Dave Stein

Essayez quelque chose comme ceci:

const wrapper = shallow(<App {...state} />);
wrapper.find('input').simulate('change', {target: {value: 'Your new Value'}});
expect(wrapper.state('mirror')).toBe('Your new Value');
14
toufek khoury