2016-12-17 14 views
16

próbuję jednostki przetestować składnik reactjs:Jak testować metodę reakcji komponentu?

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;

Wystarczy zacząć Jestem już stara się dochodzić metodę 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 
 
    }); 
 
});

`` `

W jaki sposób mogę przetestować metodę na komponencie? To jest błąd, który dostaję:

TypeError: Cannot read property 'checked' of undefined 
+0

Czemu eksportowania składnika dwukrotnie? – Swapnil

+0

, aby uniknąć błędów –

Odpowiedz

19

Jesteś prawie na miejscu. Wystarczy zmienić oczekiwać, aby w ten sposób:

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

Możesz przejść przez this link wiedzieć więcej na temat metod testowania komponentów przy użyciu enzymu

+0

Witam, naprawdę doceniam twoje rozwiązanie, bardzo mi to pomogło. Czy wiesz, czy istnieje sposób na przetestowanie funkcji komponentów z czystym żartem bez enzymu? –