在 redux-form 上使用 React-testing-library 时，表单输入不会改变

Question

我正在尝试测试当用户将文本输入到 a 时input， a会从button变为。它显然可以在浏览器中运行，但我无法通过测试。我正在使用和。但是，如果我使用本机而不是s ，测试就会通过。disabledenabledredux-formreact-testing-libraryinputredux-formField

我用最少的代码创建了一个存储库来复制问题。

Answer 1

由于您在测试中没有使用 redux-form 中的减速器，因此它的 props 将不会正确传递到您的组件。最好提供一个类似于您的应用程序实际使用的减速器。以下代码有效。

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()
})