我复制了此example,以介绍如何模拟测试onChange。区别在于我正在使用样式组件和textarea。
App.js
import React from 'react';
import styled from 'styled-components';
const StyledTextArea = styled.textarea`
border: 1px solid #ccc;
width: 500px;
`;
export function FuncTextArea({onChange = () => {}}) {
return (
<div>
<h1>hi</h1>
<StyledTextArea onChange={onChange} />
</div>
);
}
function App() {
const onChange = () => {
console.log('it works');
};
return (
<div>
<FuncTextArea onChange={onChange} />
</div>
);
}
export default App;
App.test.js
import React from 'react';
import {FuncTextArea} from './App';
import {configure, mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({adapter: new Adapter()});
it('test onchange mock', () => {
const onChange = jest.fn();
const component = mount(<FuncTextArea onChange={onChange} value="hi" />);
component.find('textarea').simulate('change');
expect(onChange).toBeCalledWith('hi');
});
npm test
,出现以下错误:
✕ test onchange mock (99ms)
● test onchange mock
expect(jest.fn()).toBeCalledWith(...expected)
Expected: "hi"
Received: {"_dispatchInstances": null, "_dispatchListeners": null, "_targetInst": {"_debugHookTypes": null, "_debugID": 144, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": null, "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": "textarea", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": <textarea … />, "tag": 5, "treeBaseDuration": 0, "type": "textarea", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": null, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": [Array], "phasedRegistrationNames": [Object]}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPersistent": [Function functionThatReturnsTrue], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"target": <textarea … />, "type": "change"}, "target": <textarea class="sc-bdVaJa fcFaHS" />, "timeStamp": 1573520803828, "type": "change"}
Number of calls: 1
10 | const component = mount(<FuncTextArea onChange={onChange} value="hi" />);
11 | component.find('textarea').simulate('change');
> 12 | expect(onChange).toBeCalledWith('hi');
| ^
13 | });
14 |
at Object.<anonymous>.it (src/App.test.js:12:20)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.005s
Ran all test suites related to changed files.
github
https://github.com/kenpeter/test-mock-on-change/tree/feature/testing-on-change
答案 0 :(得分:0)
应该与此问题有关:)
Testing parent methods in stateless child component in Jest
被模拟的函数被多个道具调用...被一个综合事件调用,这是正常的(我的大脑屁没有考虑到这一点)。就是说,您可以通过遍历mockedFn.mock.calls数组或通过对ockedFn本身断言(两者均包含在TextBox测试中)来使用Expect.objectContaining来断言Synthetic Event。