Jest测试带有样式组件文本区域的更改

Question

我复制了这个关于如何模拟测试onChange的例子。不同的是，我使用的是样式组件和文本区域。

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

Answer 1

应该与此问题有关：(

在Jest 中测试无状态子组件中的父方法

模拟函数是用多个道具调用的。。。它被称为合成事件，这是正常的(我的大脑因为没有考虑到这一点而放屁(。也就是说，您可以通过使用expect.objectContaining来断言Synthetic Event，方法是遍历mockedFn.mock.calls数组或断言mockedFn本身(两者都包含在TextBox测试中(。