React-testing-library: changes due to input

Question

I'm trying to test that a component updates as it should due to changes in an input element. I use the fireEvent.change()-function, and if I then check the value of the node I found using getByPlaceholderText it has updated as it should. However I cannot see the changes in the react component itself.

This might be because the changes don't happen until a rerender; how would I test this? react-testing-library's rerender appears to start the component "from scratch" (i.e. without the new input value), and waitForElement never finds what it's waiting for.

Here's the component TestForm.js:

import React from 'react';
import { withState } from 'recompose';

const initialInputValue = 'initialInputValue';

const TestForm = ({ inputValue, setInputValue }) => (
  <>
    {console.log('inputValue', inputValue)}
    <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="placeholder" />
    {inputValue !== initialInputValue && <div>Input has changed</div>}
  </>
);

export default withState('inputValue', 'setInputValue', initialInputValue)(TestForm);

And here's the test, run using npx jest test.js:

import React from 'react';
import { cleanup, fireEvent, render, waitForElement } from 'react-testing-library';

import TestForm from './TestForm';

afterEach(cleanup);

describe('TestForm', () => {
  it('Change input', async () => {
    const { getByPlaceholderText, getByText } = render(<TestForm />);
    const inputNode = getByPlaceholderText('placeholder');
    fireEvent.change(inputNode, { target: { value: 'new value' } });
    console.log('inputNode.value', inputNode.value);
    await waitForElement(() => getByText('Input has changed'));
  });
});

Decimeter

Answer 1

This code works for me:

import React from "react";

const initialInputValue = "initialInputValue";

class TestForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: initialInputValue };
  }
  render() {
    const { inputValue } = this.state;

    return (
      <div>
        {console.log("inputValue", inputValue)}
        <input
          value={inputValue}
          onChange={e => this.setState({ inputValue: e.target.value })}
          placeholder="placeholder"
        />
        {inputValue !== initialInputValue && <div>Input has changed</div>}
      </div>
    );
  }
}

import { render, cleanup, fireEvent } from "react-testing-library";
import "jest-dom/extend-expect";

afterEach(cleanup);

test("form", () => {
  const { getByPlaceholderText, getByText } = render(<TestForm />);
  fireEvent.change(getByPlaceholderText("placeholder"), {
    target: { value: "new value" }
  });
  expect(getByText("Input has changed")).toBeInTheDocument();
});

It does not work in codesandbox though, I guess they have some issues with keeping the browser and the test environment separated.

Hockenberry

Oh, but unless I misunderstand you I'm seeing the opposite: the inputNode.value does change, but the getByText never triggers (the TestForm component never seems to update). Apologies if the question was unclear – Decimeter

Have you tried using wait instead of waitForElement? – Hockenberry

No I wasn't aware of that one! However it seems to give the same result. I tried like this: await wait(() => getByText('Input has changed')); – Decimeter

Please put the code in codesandbox so I can take a look at it while it's running – Hockenberry

Updated my answer. I think it's something wrong with the environment where you run your tests – Hockenberry

Yes there was, thank you very much! Naively I had been running the tests with the same environment as my existing enzyme tests. – Decimeter

Prefer using userEvent.upload, userEvent.type, userEvent.clear, userEvent.selectOptions, or userEvent.deselectOptions over fireEvent.change – Sierrasiesser

Answer 2

using user-event library

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

afterEach(cleanup);

test("form", async () => {
  const user = userEvent.setup();
  const { getByPlaceholderText, getByText } = render(<TestForm />);
  
  await user.type(getByPlaceholderText("placeholder"), "new value");
  
  await waitFor(() => {
    expect(getByText("Input has changed")).toBeInTheDocument();
  });
});

Chase

I don't understood the test expected. You are testing if the Element that contains "Input has changed" is defined in document. but, I think it's not testing the "new value" that was typed in element – Mock