react-testing-library: onChange event not triggering function

react-testing-library version: 5.0.1
react version: 16.5.0
node version: 9.11.1 or 8.11.1 (tested to see if it made a difference)
npm (or yarn) version: 5.6.0

Relevant code or config:

// CostInput.js
import React from 'react';

const CostInput = ({ handleChange }) => (
  <div>
    <label htmlFor="cost">Item Cost</label>
    <input type="string" id="cost" onChange={handleChange} />
  </div>
);
export default CostInput;

// CostInput.test.js
import React from "react";
import { render, cleanup, fireEvent } from "react-testing-library";
import CostInput from "./CostInput";

afterEach(cleanup);
it("handleChange function called", () => {
  const spy = jest.fn();
  const { getByLabelText } = render(<CostInput handleChange={spy} />);
  let input = getByLabelText("Item Cost");
  expect(input.value).toBe("");
  fireEvent.change(input, { target: { value: "23" } });
  expect(spy).toHaveBeenCalledTimes(1);
});

What you did:

I wrote a test to check that the handleChange function would be called. I also ran the same code on CodeSandbox at https://codesandbox.io/s/jvw4499xzw.

What happened:

The test fails on my local environment which is a CRA application that only has those 2 files in it.
It works on the Code Sandbox without a problem.

Reproduction:

The working Code Sandbox can be found here: https://codesandbox.io/s/jvw4499xzw
The broken repo is found here: https://github.com/themostcolm/react-testing-bug If possible, please create a repository that reproduces the issue with the minimal amount of code possible.

Problem description:

It is making my app untestable.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 21 (13 by maintainers)

Commits related to this issue

docs: add a note about triggering onChange event on checkbox (#178) **What**: Added a note about triggering `onChange` event handler on a checkbox to README.md **Why**: Discussed in #175 **C... — committed to testing-library/react-testing-library by Enikol 6 years ago
docs: move CODE_OF_CONDUCT.md to correct location (#175) **What**: Move `CODE_OF_CONDUCT.md` from `other` to root of repo **Why**: `README.md` links to this file and expects to find it in th... — committed to julienw/react-testing-library by RoystonS 6 years ago
Merge pull request #175 from testing-library/updates Updates — committed to lucbpz/react-testing-library by Gpx 5 years ago

Most upvoted comments

Ok, so you are all probably experiencing slightly different problems.

@themostcolm, your issue is that your CostInput renders an input which has a type of string but that’s not a supported value for type (you probably want text). Changing it to text makes everything work fine: https://codesandbox.io/s/zn0wzonq94

@SZBoatwright, my guess is you’re experiencing the same issue.

@denchen, the reason you’re getting all those errors is because jest is reading properties from the Synthetic Event that React called your event handler with and that synthetic event has already been returned to the pool (learn more about the synthetic event system here: https://www.youtube.com/watch?v=dRo_egw7tBc&list=PLV5CVI1eNcJi8sor_aQ2AzOeQ3On3suOr). The solution is to not make an assertion about how your event handler was called because that’s an implementation detail. Assert on the DOM output, how the your prop function callbacks were called, or how other modules were called.

@Enikol, this should probably be documented better, but with checkboxes you don’t actually fire change events, you should fire click events instead. Would you like to open a pull request to document that in the README?

Thanks everyone! I’m going to go ahead and close this now 😃

+14

kentcdodds on Sep 17, 2018

I can confirm that I’m having the same problem. I assumed I was doing something incorrectly until I saw this issue. I also attempted to use waitForElement with no luck.

+10

zachboatwright on Sep 12, 2018

@denchen your issue is likely unrelated. Read the information in the error message link.

I’ll try to give this a look when I get the chance, but probably not until next week.

kentcdodds on Sep 13, 2018

@MatanBobi seems my issue is related to final forms as soon as final forms have own state.

No problems with mobx and jest. Just need to construct (find) selectors from wrapper element (provided by mount/render/shallow) to avoid sideeffects.

konstantin-tarasov-clearscale on Jun 2, 2020

@themostcolm I’m on a mac with Sierra. I have a desktop with Windows 10 on it that I could try on as well.

zachboatwright on Sep 13, 2018