在 redux-form 上使用 react-testing-library 时表单输入没有改变
Form input not changing when using react-testing-library on redux-form
我正在尝试测试当用户将文本输入 input
时 button
从 disabled
变为 enabled
。它显然在浏览器中有效,但我无法通过测试。我正在使用 redux-form
和 react-testing-library
。但是,如果我使用原生 input
而不是 redux-form
的 Field
,则测试通过。
我用最少的代码创建了一个 repo 来重现这个问题。
由于您没有在测试中使用 redux-form 中的 reducer,因此它的 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()
})
我正在尝试测试当用户将文本输入 input
时 button
从 disabled
变为 enabled
。它显然在浏览器中有效,但我无法通过测试。我正在使用 redux-form
和 react-testing-library
。但是,如果我使用原生 input
而不是 redux-form
的 Field
,则测试通过。
我用最少的代码创建了一个 repo 来重现这个问题。
由于您没有在测试中使用 redux-form 中的 reducer,因此它的 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()
})