2016-12-17 21 views
16

Tôi cố gắng để đơn vị kiểm tra thành phần reactjs tôi:Làm thế nào để đơn vị kiểm tra một phương pháp phản ứng thành phần?

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;

Chỉ cần để bắt đầu tôi đã đấu tranh để khẳng định phương pháp 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 
 
    }); 
 
});

`` `

Tôi có thể kiểm tra phương pháp trên thành phần như thế nào? Đây là lỗi tôi nhận được:

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

Tại sao cậu lại xuất khẩu thành phần của bạn hai lần? – Swapnil

+0

để tránh lỗi –

Trả lời

19

Bạn sắp hoàn tất. Chỉ cần thay đổi mong đợi của bạn như thế này:

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

Bạn có thể đi qua this link để biết thêm về các phương pháp thành phần thử nghiệm sử dụng enzyme

+0

Xin chào, thực sự đánh giá cao giải pháp của bạn, nó cũng giúp tôi rất nhiều. Bạn có biết liệu có cách nào để kiểm tra các chức năng thành phần với sự tinh khiết mà không có enzyme không? –

Các vấn đề liên quan