Jest test onchange with styled component textarea

Question

I copied this example on how to mock test onChange. The different is that I am using style component and 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, i got the following error:

 ✕ 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

could you discover what is was? facing same problem here – Jeff Goes Mar 20 '20 at 19:42 — Jeff Goes, Mar 20 '20 at 19:42

score 0 · Answer 1 · answered Aug 06 '20 at 19:01

Should be related to this issue :)

Testing parent methods in stateless child component in Jest

mocked function was being called with multiple props... it's being called with a Synthetic Event, which is normal (my brain fart for not taking this into account). That said, you can assert against the Synthetic Event by using expect.objectContaining by either traversing the mockedFn.mock.calls arrays or by asserting against the mockedFn itself (both are included in the TextBox tests).

Also check out this : https://github.com/enzymejs/enzyme/issues/1201 — Wen-Yu Wang, Aug 06 '20 at 19:02

Jest test onchange with styled component textarea

1 Answers1