Form input not changing when using react-testing-library on redux-form

Question

I am trying to test that when a user inputs text into an input that a button changes from disabled to enabled . It clearly works in the browser, but I can not get the test to pass. I am using redux-form and react-testing-library . However, if I use a native input rather than redux-form 's Field , the test passes.

I created a repo with minimal code to duplicate the problem.

Answer 1

Since you are not using the reducer from redux-form in your tests, its props will not be passed down to your component correctly. It's best if you provide a reducer which resembles what your app is actually using. The following code works.

import React from "react"
import { Provider } from "react-redux"
import { combineReducers, createStore } from "redux"
import { reducer as reduxFormReducer } from "redux-form"
import { fireEvent, render } from "@testing-library/react"
import SimpleForm from "./SimpleForm"

// Create a reducer that includes the form reducer from redux-form
const reducer = combineReducers({
  form: reduxFormReducer,
})

const store = createStore(reducer)

it("test that button is not disabled when input is entered", () => {
  const { getByLabelText, getByText } = render(
    <Provider store={store}>
      <SimpleForm />
    </Provider>,
  )

  const input = getByLabelText("Name")
  const submit = getByText("Submit")

  fireEvent.change(input, { target: { value: "test input" } })

  expect(submit).not.toBeDisabled()
})