Validate fireEvent.change

• @testing-library/react version: "@testing-library/react": "^10.4.8",
• Testing Framework and version: "jest": "^26.3.0", "ts-jest": "^26.2.0",
• DOM Environment: "@testing-library/jest-dom": "^5.11.2",

"react": "^16.13.0",

Relevant code or config:

FULL CODE SANDBOX: https://codesandbox.io/s/silly-hertz-1v1uq

The test file: 'BasicSearchElement.test.tsx'

import React, { SyntheticEvent } from "react";
import {
  BasicSearchElement,
  BasicSearchElementProps
} from "../src/BasicSearchElement";
import { render, RenderResult, fireEvent } from "@testing-library/react";

describe("BasicSearchElement with props", () => {
  test("this test, which does not pass a value to 'renderBasicSearchElement', passes", async () => {
    const mockInputValue = "mockInputValue";
    const handleChange = jest.fn();
    const renderedComponent: RenderResult = renderBasicSearchElement({
      onChange: handleChange
      //value: mockInputValue THIS IS OMITTED IN THE PASSING TEST
    });

    const input = await renderedComponent.findByTestId("BasicSearchElement");

    const mockTypingEvent: Partial<SyntheticEvent> = {
      target: { value: mockInputValue }
    };
    fireEvent.change(input, mockTypingEvent);
    //handleChange is called once when we don't pass a value in renderBasicSearchElement
    expect(handleChange).toHaveBeenCalledTimes(1);
  });
  test("this test, which DOES pass a value to 'renderBasicSearchElement', FAILS", async () => {
    const mockInputValue = "mockInputValue";
    const handleChange = jest.fn();
    const renderedComponent: RenderResult = renderBasicSearchElement({
      onChange: handleChange,
      value: mockInputValue //HERE WE PASS A VALUE
    });

    const input = await renderedComponent.findByTestId("BasicSearchElement");

    const mockTypingEvent: Partial<SyntheticEvent> = {
      target: { value: "mockInputValue" }
    };
    fireEvent.change(input, mockTypingEvent);
    //handleChange is called once when we don't pass a value in renderBasicSearchElement
    expect(handleChange).toHaveBeenCalledTimes(1);
  });
});

function renderBasicSearchElement(
  props: Partial<BasicSearchElementProps> = {}
) {
  // @ts-ignore
  return render(<BasicSearchElement {...props} />);
}

What you did:

There are two tests defined in the testing file. In the first test, we do NOT pass a value to the input component. See line 14
//value: mockInputValue THIS IS OMITTED IN THE PASSING TEST

In the second test, we DO pass a value to the input component. See line 31
value: mockInputValue //HERE WE PASS A VALUE

What happened:

The first test passes the condition on line 24 (expect(handleChange).toHaveBeenCalledTimes(1);).
That is, the handleChange callback is called once after we call fireEvent.change(input, mockTypingEvent);

The second test fails the same condition, but on line 41. That is, the handleChange callback is NOT called after our fireEvent.change(input, mockTypingEvent);. The official failure message is: expect(jest.fn()).toHaveBeenCalledTimes(expected) Expected number of calls: 1 Received number of calls: 0

The only difference between the tests is whether or not we decide to pass a value to our input element (lines 14 and 31). That is, if we specify a "value" prop for the input element, the handleChange callback is not executed

Reproduction:

FULL CODE SANDBOX: https://codesandbox.io/s/silly-hertz-1v1uq

Problem description:

The handleChange callback should be called (after a call to fireEvent.change) even if we pass a value to the input element

Suggested solution:

I don't have time right now to investigate this more.

Start with the BasicSearchElement.test.tsx reproduction and the linked CodeSandbox, then inspect how fireEvent.change is used with the controlled input. Run the two tests and compare the callback behavior when the value prop is omitted or provided; done means the callback is invoked once in both cases.