반응형
반응 구성 요소 방법을 유닛 테스트하는 방법
내 리액션 구성 요소를 유닛 테스트하려고 함:
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;단지 시작하기 위해 나는 이미 다음과 같은 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
});
});```
구성 요소에서 메서드를 테스트하려면 어떻게 해야 하는가?다음과 같은 오류가 발생하는 경우:
TypeError: Cannot read property 'checked' of undefined
거의 다 왔어.기대치를 다음으로 변경하십시오.
expect(wrapper.instance().checkBoxChecked()).equals(true);
이 링크를 통해 효소를 이용한 성분법 테스트에 대해 자세히 알 수 있다.
승인된 답변이 작동하지 않는 경우 다음을 사용하십시오..dive()사용하기 전에 당신의 얕은 포장지에.instance():
expect(wrapper.dive().instance().somePrivateMethod()).toEqual(true);
이전 답변의 연장.구성 요소(Redex)를 연결한 경우 다음 코드를 시도하십시오.
const store=configureStore();
const context = { store };
const wrapper = shallow(
<MyComponent,
{ context },
);
const inst = wrapper.dive().instance();
inst.myCustomMethod('hello');
참조URL: https://stackoverflow.com/questions/41196561/how-to-unit-test-a-method-of-react-component
반응형
'Programing' 카테고리의 다른 글
| Vuex 작업에서 약속 반환 (0) | 2022.04.05 |
|---|---|
| 각도2: 객체를 다른 객체로 복사하는 방법 (0) | 2022.04.05 |
| Python의 원시_input 함수 (0) | 2022.04.05 |
| 파일 업로드(vuetify) (0) | 2022.04.05 |
| Python 수퍼()가 TypeError를 발생시킴 (0) | 2022.04.05 |