Question

我正在尝试使用react-testing-library测试属于Redux形式的一部分的代码。为文本输入字段调用fireEvent.change设置新值我希望输入的值应该更新，但是永远不会发生。请在下面找到测试的片段。完整的代码可以在https://codesandbox.io/s/redux-form-simple-example-n3820找到有什么好的示例如何使用react-testing-library测试redux-form？

...

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);

Answer 1

您已使用createMockStore中的redux-test-utils。这无疑使创建商店更加容易。但是redux form应该连接到redux store才能正常工作。您可以在以下位置阅读文档：

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

我根据react-testing-library文档创建了商店以测试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>)
  };
};

我也面临着与您同样的问题。因此，我创建的测试与您创建的测试不同，但是这里的问题是相同的（即，表单没有用redux-form填充）

这是codeandbox的链接：https://codesandbox.io/s/nostalgic-greider-4gqcg

Answer 2

问题是您正在执行fireEvent.click(submitButton)，这会在按钮上触发click事件。您的表单虽然没有监听该事件，但是正在监听表单上的Submit事件。您必须改为fireEvent.submit(formElement)。

我注意到其他一些事情不一定是错误的，但可能会更好。

您无需导入getByTestId即可从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')

说到getByTestId，您应该把它作为最后的手段。在您的情况下，最好使用getByLabelText获取输入并使用getByText查找按钮。要获取form，可以使用getByText('Submit').closest('form')。

您应该使用cleanup方法来避免测试中出现问题。

如何使用react-testing-library测试redux-form

2 个答案: