使用样式化组件 textarea 对 onchange 进行 Jest 测试

Question

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

Answer 1

应该和这个问题有关:)

Testing parent methods in stateless child component in Jest

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