web-dev-qa-db-fra.com

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

J'essaie de tester un peu mon composant reactjs:

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;

Pour commencer, je peine déjà à affirmer la méthode checkBoxChecked:

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 tester une méthode sur le composant? C'est l'erreur que j'obtiens:

TypeError: Cannot read property 'checked' of undefined
unit-testingreactjschaienzyme
45
bier hier

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

57
Swapnil

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

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

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

8
Or A.

É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');
0
Serhii Bilyk