如何使用 react-testing-library 测试带有动作重定向的表单

Question

I added a search bar using a form and an input to my React app, and I would like to check that it redirects to the right page.我使用表单和我的 React 应用程序的输入添加了一个搜索栏，我想检查它是否重定向到正确的页面。 I am using react-testing-library and react-router-dom.我正在使用 react-testing-library 和 react-router-dom。

Here is my component (simplified):这是我的组件（简化）：

const SearchBar = () => (
  <form action={'/search'}>
    <input type="search" name="q" placeholder="search"></input>
  </form>
)

So I wrote this test to check that when I type something in the input, I am redirected to the /search page (which happens in my browser).所以我编写了这个测试来检查当我在输入中输入内容时，我是否被重定向到 /search 页面（这发生在我的浏览器中）。 I followed https://testing-library.com/docs/example-react-router/ and came up with this:我跟着https://testing-library.com/docs/example-react-router/想出了这个：

  it('redirects to search page', async () => {
    const history = createMemoryHistory();
    const header = render(
      <Router history={history}>
        <Switch>
          <Route exact path="/">
            <SearchBar />
          </Route>
          <Route path="/search">
            <div>this is the search page</div>
          </Route>
        </Switch>
      </Router>
    );

    const searchBar = header.getByPlaceholderText('search');
    fireEvent.change(searchBar, { target: { value: 'myQuery' } });
    fireEvent.submit(searchBar);
    expect(screen.getAllByText('this is the search page')).toBeInTheDocument();
  });

Unfortunately it fails with the following error:不幸的是，它失败并出现以下错误：

    TestingLibraryElementError: Unable to find an element with the text: this is the search page. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <form
          action="/search"
        >
          <input
            name="q"
            placeholder="search"
            type="search"
          />
        </form>
      </div>
    </body>

      91 |     fireEvent.change(searchBar, { target: { value: 'myQuery' } });
      92 |     fireEvent.submit(searchBar);
    > 93 |     expect(screen.getAllByText('this is the search page')).toBeInTheDocument();
         |                   ^
      94 |   });
      95 | });
      96 |

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:92:38
      at getAllByText (node_modules/@testing-library/dom/dist/query-helpers.js:127:15)
      at Object.<anonymous> (src/components/Header/Header.test.tsx:93:19)

From what I understand, I believe that submitting a form does not change the location of my router.据我了解，我相信提交表单不会改变我的路由器的位置。

Is there a way to make the test pass without changing my code?有没有办法在不更改我的代码的情况下通过测试？ Or should I forget relying on the action of the form and instead implement a custom onSubmit property that handles the redirection - which I could more easily test?或者我应该忘记依赖form的action ，而是实现一个处理重定向的自定义onSubmit属性 - 我可以更轻松地测试它？

Thanks:)谢谢：）

Answer 1

The form action does not use React Router DOM but instead the native method .表单操作不使用 React Router DOM，而是使用本地方法。

<form action={'/search'}>

If you want to use React Router for this, consider using a React onSubmit handler.如果你想为此使用 React Router，请考虑使用 React onSubmit处理程序。 Then your original test should more or less work after integrating with your actual implementation.然后，在与您的实际实现集成后，您的原始测试应该或多或少地工作。

const SearchBar = () => {
  const history = useHistory();

  const handleSubmit = (event) => {
    // Prevent default native behavior of submit
    event.preventDefault();
    // Push the new location to React Router DOM
    history.push("/search");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="search" name="q" placeholder="search"></input>
    </form>
  );
};

If you are not looking to change the implementation to use the router, I think a good solution would be to test if the action property is correct and not test native behavior, especially since it's hard to test non-router navigation changes in ( example ) and form submission isn't fully implemented into JSDOM.如果您不希望更改实现以使用路由器，我认为一个好的解决方案是测试action属性是否正确而不测试本机行为，特别是因为很难测试非路由器导航更改（示例）并且表单提交没有完全实现到 JSDOM 中。

it('has form action for the search page', () => {
  const history = createMemoryHistory();
  const header = render(
    <Router history={history}>
      <SearchBar />
    </Router>
  );

  const searchBar = header.getByPlaceholderText('search');
  expect(searchBar).toHaveAttribute('action', '/search');
});

如何使用 react-testing-library 测试带有动作重定向的表单

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-07 04:00:23

如何使用 react-testing-library 测试带有动作重定向的表单

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-07 04:00:23

解决方案1
1 已采纳 2021-02-07 04:00:23