52 votes

Comment tester à l'unité une méthode de composant de réaction?

Je suis en train de test unitaire mon reactjs composant:

import React from 'react';
import Modal from 'react-modal';
import store from '../../../store'
import lodash from 'lodash'

export class AddToOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {checked: false}
    //debugger
  }
  checkBoxChecked() {
    return true
  }
  render() {
    console.log('testing=this.props.id',this.props.id )
    return (
      <div className="order">
        <label>
          <input
            id={this.props.parent}
            checked={this.checkBoxChecked()}
            onChange={this.addToOrder.bind(this, this.props)}
            type="checkbox"/>
          Add to order
        </label>
      </div>
    )
  }
}

export default AddToOrder;

Juste pour commencer, je suis déjà de la difficulté à faire valoir le checkBoxChecked méthode:

import React from 'react-native';
import {shallow} from 'enzyme';
import {AddToOrder} from '../app/components/buttons/addtoorder/addtoorder';
import {expect} from 'chai';
import {mount} from 'enzyme';
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
global.document = doc
global.window = doc.defaultView

let props;
beforeEach(() => {
  props = {
    cart: {
      items: [{
        id: 100,
        price: 2000,
        name:'Docs'
      }]
    }
  };
});

describe('AddToOrder component', () => {
  it('should be handling checkboxChecked', () => {
    const wrapper = shallow(<AddToOrder {...props.cart} />);
    expect(wrapper.checkBoxChecked()).equals(true); //error appears here
  });
});

``

Comment puis-je l'unité de tester une méthode sur le composant? C'est l'erreur que j'obtiens:

TypeError: Cannot read property 'checked' of undefined

64voto

Swapnil Points 1623

Tu es presque là. Il suffit de changer votre attente à ceci:

 expect(wrapper.instance().checkBoxChecked()).equals(true);
 

Vous pouvez passer par ce lien pour en savoir plus sur les méthodes de test de composants utilisant des enzymes

8voto

Or A. Points 507

Pour ceux qui trouvent que la réponse acceptée ne fonctionne pas, essayez d'utiliser .dive() sur votre enveloppe peu profonde avant d'utiliser .instance() :

 expect(wrapper.dive().instance().somePrivateMethod()).toEqual(true);
 

Référence: Méthodes d'essai de composants avec une enzyme

1voto

Serhii Bilyk Points 9

Étendue de la réponse précédente. Si vous avez un composant connecté (Redux), essayez le code suivant:

  const store=configureStore();
  const context = { store };
   const wrapper = shallow(
      <MyComponent,
      { context },
    );
   const inst = wrapper.dive().instance();
   inst.myCustomMethod('hello');
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X