我有一个组件,我在其中为 input type=text
编写了 onBlur
和 onChange
事件处理程序。
<input type="text" onBlur={ this.fetchProspectIdDetails } onChange={ this.handleProspectIdChange } name="prospectId" value={this.state.prospectId}></input>
当我尝试为 onchange
编写测试用例时,它起作用了
it('Testing empty Salesforce Id Check', () => {
wrapper.find('input[name="prospectId"]')
.simulate('change', {target: {name: 'prospectId', value: ''}});
expect(wrapper.state('validSalesForceId')).toEqual(false);
});
但是 onBlur
函数,即 fetchProspectIdDetails
没有被调用
it('Testing the ProspectId State', () => {
wrapper.find('input[name="prospectId"]')
.simulate('blur', {target: {name: 'prospectId', value: '001G000000mIQIY'}});
expect(wrapper.state('prospectId')).toEqual('001G000000mIQIY');
});
我做错了什么?
最佳答案
它工作正常。这是一个工作示例:
index.jsx
:
import React, { Component } from 'react';
export class Example extends Component {
constructor(props) {
super(props);
this.state = {
prospectId: 1,
validSalesForceId: true,
};
this.fetchProspectIdDetails = this.fetchProspectIdDetails.bind(this);
this.handleProspectIdChange = this.handleProspectIdChange.bind(this);
}
fetchProspectIdDetails(e) {
console.log('onblur');
this.setState({ prospectId: e.target.value });
}
handleProspectIdChange(e) {
console.log('onchange');
this.setState({ validSalesForceId: !!e.target.value });
}
render() {
return (
<input
type="text"
onBlur={this.fetchProspectIdDetails}
onChange={this.handleProspectIdChange}
name="prospectId"
value={this.state.prospectId}
></input>
);
}
}
index.test.jsx
:
import { shallow } from 'enzyme';
import React from 'react';
import { Example } from '.';
describe('53407041', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<Example></Example>);
});
it('Testing empty Salesforce Id Check', () => {
wrapper.find('input[name="prospectId"]').simulate('change', { target: { name: 'prospectId', value: '' } });
expect(wrapper.state('validSalesForceId')).toEqual(false);
});
it('Testing the ProspectId State', () => {
wrapper
.find('input[name="prospectId"]')
.simulate('blur', { target: { name: 'prospectId', value: '001G000000mIQIY' } });
expect(wrapper.state('prospectId')).toEqual('001G000000mIQIY');
});
});
单元测试结果:
PASS examples/53407041/index.test.jsx
53407041
✓ Testing empty Salesforce Id Check (59 ms)
✓ Testing the ProspectId State (2 ms)
console.log
onchange
at Example.handleProspectIdChange (examples/53407041/index.jsx:19:13)
console.log
onblur
at Example.fetchProspectIdDetails (examples/53407041/index.jsx:15:13)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.jsx | 100 | 100 | 100 | 100 |
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 5.286 s
源代码:https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/53407041
关于javascript - onBlur 未在 Jest 测试用例、React App 中调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53407041/