How to test redux-form using react-testing-library

Question

I'm trying to test a code that is a part of redux-form using react-testing-library. Calling fireEvent.change for text input fields to set up new values I expect that input's values should be updated, but it never happens. Please find a fragment of the test below. Full code can be found at https://codesandbox.io/s/redux-form-simple-example-n3820 Any good examples how to test redux-form using react-testing-library?

...

const firstNameInput = getByTestId(container, "firstName");
const lastNameInput = getByTestId(container, "lastName");

const firstName = "firstName";
const lastName = "lastName";

fireEvent.change(firstNameInput, { target: { value: firstName } });
fireEvent.change(lastNameInput, { target: { value: lastName } });

const submitButton = getByTestId(container, "submitButton");
fireEvent.click(submitButton);

expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenNthCalledWith(firstName, lastName);

I am facing the same problem. Is it solved?

Rojen
– Rojen

2020-02-25 09:24:46 +00:00
Commented Feb 25, 2020 at 9:24 — Rojen
– Rojen, Commented Feb 25, 2020 at 9:24

Gio Polvara · Accepted Answer · 2019-06-16 10:14:04Z

5

The problem is that you are doing fireEvent.click(submitButton) which fires a click event on the button. Your form is not listening for that event though, it's listening for the submit event on the form. You have to do this instead fireEvent.submit(formElement).

Some other things I noticed that are not necessarily wrong but could be better.

There's no need to import getByTestId you get it back from the render:

// Before
import { render, getByTestId } from '@testing-library/react'
const { container } = render(<Component />)
getByTestId(container, 'foo')

// After
import { render } from '@testing-library/react'
const { getByTestId } = render(<Component />)
getByTestId('foo')

Speaking of getByTestId you should use it as a last resort. In your case, it's much better to use getByLabelText to get the inputs and getByText to find the button. To get the form you can use getByText('Submit').closest('form').

You should use the cleanup method to avoid issues in your tests.

answered Jun 16, 2019 at 10:14

Gio Polvara

27.4k10 gold badges70 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

osmola Over a year ago

Thank you for the answer! I've updated tests to use form submit instead of button click, but still cannot get the tests passed. Please find the updated version here codesandbox.io/s/redux-form-simple-example-po8bx It looks like that values of text fields are not updated after fireEvent.change for them.

Gio Polvara Over a year ago

I think the error you're seeing is related to codesandbox github.com/codesandbox/codesandbox-client/issues/502

Gio Polvara Over a year ago

Run your tests in your local machine and you should see the correct issue

osmola Over a year ago

Tests failed on the local machine as well.

osmola Over a year ago

The same error, the test fails because inputs' values were not updated after fireEvent.change, so form onSubmit was called with initial input values not with updated imgur.com/a/Q6aL7hh

|

Rojen · Accepted Answer · 2020-02-26 05:08:08Z

4

You have used createMockStore from redux-test-utils. It sure makes creating store easier. But the redux form should be connected to redux store to work. You can read the documentation at:

https://redux-form.com/8.2.2/docs/gettingstarted.md/#overview and https://redux-form.com/8.2.2/docs/gettingstarted.md/#data-flow

I created the store following react-testing-library documentation to test redux https://testing-library.com/docs/example-react-redux

const renderWithRedux = (
  component,
  {
    initialState,
    store = createStore(
      combineReducers({ userReducer, form: formReducer }),
      initialState
    )
  } = {}
) => {
  return {
    ...render(<Provider store={store}>{component}</Provider>)
  };
};

I too was facing the same problem as yours. So, the test I have created is different than yours but the problem here is same (i.e form is not being filled with redux-form)

Here is the link to codesandbox: https://codesandbox.io/s/nostalgic-greider-4gqcg

answered Feb 26, 2020 at 5:08

Rojen

3461 gold badge2 silver badges16 bronze badges

1 Comment

abr Over a year ago

Works a treat, thanks so much.

Collectives™ on Stack Overflow

How to test redux-form using react-testing-library

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related