我复制了此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