하위 구성 요소의 내 단추를 클릭 한 후 하위 구성 요소로 전달되는 콜백이 호출되는지 테스트 중입니다. .simulate('click') 함수를 사용하여 반응 부트 스트랩 버튼 <Button></Button>을 시뮬레이션합니다.React-jest-enzyme : 콜백을 호출하기 전에 먼저 다른 함수를 호출하는 하위 구성 요소의 콜백 테스트
내 버튼의 onClick() 함수가 update()이라는 다른 함수를 호출하고 그 함수가 내 자식 구성 요소에 전달 된 handleSave 콜백을 호출한다는 점이 문제입니다. <FormControl/> 요소의 onKeyPress 기능도 내 구성 요소의 업데이트 기능을 호출합니다. 다음은 내 하위 구성 요소의 설정을 가지고 방법 : 내 update() 기능 charCode==13에서 온 있는지 확인하기 위해 수표를 가지고, 그 이유는 입력 키의 charCode 값, 또는 둘 모두를 저장하기 때문에 버튼 클릭이다
update(event) {
//Have to check to see if the key stroke is the enter key or if it comes from the button click.
if(event.charCode === 13 || event.type === 'react-click'){
// Have to use this get the ref value because this.refs.input.value doesn't work.
var input = ReactDOM.findDOMNode(this.refs.input);
input.value = '';
this.props.handleSave();
}
}
render(){
return(
<Form>
<FormControl type="text" ref="input" onKeyPress={this.update.bind(this)} placeholder="Enter Note" />
<Button onClick={this.update.bind(this)}>Submit </Button>
</Form>
)
}
내 테스트 설정이 방법을 가지고 <FormControl />
에있는 정보는 :
describe('Input',() => {
const mockHandleText = jest.fn();
const mockHandleSave = jest.fn();
const props = {handleSave: mockHandleSave}
let input = shallow(<Input {...props} />);
describe('when entering a note',() => {
beforeEach(() => {
input.find('Button').simulate('click', {
charCode: 13
});
});
it('adds the note to state',() => {
expect(props.handleSave).toHaveBeenCalled();
});
});
});
이상한 것은 내가 할 것을 .simulate() 기능에 두 번째 매개 변수로 개체를 전달해야한다는 것입니다 나는 그것이 정의의 charCode 값을 읽을 수없는 말을 나에게 오류를 줄 것이다하지 않습니다하지만 객체를 통과 할 때, 객체가 심지어 이벤트 속성을 가지고 있지 않은 경우 그것은 단지
expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called.
또한 어떤 속성을 가진 객체를 전달하지 않으면 내 요소의 onChange 함수에서 콜백에 대한 다른 테스트도 중단됩니다. 단순성을 위해 코드 샘플에서 제외하고 문제를 일으키는 코드를 업로드했습니다. 또한 with와 bootstrap 형식을 사용하고 있습니다. 전체 코드는 github.com/Alebron23의 내 github에 있습니다.
내 github에서 Notetaker repo에 있습니다. –