我正在尝试为单击按钮时编写一个测试,该测试将调用handleClick函数,但在测试中我的断言中始终收到错误。这是React组件:
function Profile() {
const [name, setName] = useState({
firstName: '',
lastName: ''
});
const [names, setNames] = useState([]);
const handleClick = (e) => {
e.preventDefault();
names.push(name);
}
return (
<form >
<input
type = "text"
value = {name.firstName}
onChange = {
e => setName({
...name,
firstName: e.target.value
})
}/>
<input
type = "text"
value = {name.lastName}
onChange = {
e => setName({
...name,
lastName: e.target.value
})
}/>
<button onClick = {handleClick} > Add Name < /button> </form>
)
}
export default Profile
这是测试:
it('test 1 - call handleClick spy', () => {
const handleClick = sinon.spy();
let wrapper = shallow(<Profile handleClick={handleClick}/>);
wrapper.find('button').simulate('click',{preventDefault:()=>{}});
expect(handleClick.calledOnce).toBe(true);
});
click事件不会触发您传入的模拟handleClick
方法,而是触发在组件内部定义的handleClick
方法。这就是为什么不调用模拟的handleClick方法的原因。
要确定是否正在调用组件内部的handleClick
方法,可以使用诸如preventDefault
之类的间接方法来确定是否正在调用preventDefault
函数。
例如
index.jsx
:
import React, { useState } from 'react';
function Profile() {
const [name, setName] = useState({
firstName: '',
lastName: '',
});
const [names, setNames] = useState([]);
const handleClick = (e) => {
e.preventDefault();
names.push(name);
};
return (
<form>
<input
type="text"
value={name.firstName}
onChange={(e) =>
setName({
...name,
firstName: e.target.value,
})
}
/>
<input
type="text"
value={name.lastName}
onChange={(e) =>
setName({
...name,
lastName: e.target.value,
})
}
/>
<button onClick={handleClick}> Add Name </button>{' '}
</form>
);
}
export default Profile;
index.test.jsx
:
import React from 'react';
import Profile from '.';
import { shallow } from 'enzyme';
describe('62202833', () => {
it('should pass', () => {
const wrapper = shallow(<Profile></Profile>);
const mEvent = { preventDefault: jest.fn() };
wrapper.find('button').simulate('click', mEvent);
expect(mEvent.preventDefault).toBeCalledTimes(1);
});
});
单元测试结果:
PASS stackoverflow/62202833/index.test.jsx (13.273s)
62202833
✓ should pass (12ms)
-----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files | 85.71 | 100 | 50 | 80 |
index.jsx | 85.71 | 100 | 50 | 80 | 21-31
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 15.05s