React 測試庫：簡單的路由測試錯誤

Question

我為 react-router 編寫了一個非常簡單的測試。 測試應該簡單地測試帶有 to 道具的按鈕在點擊時導航to新路線。

const Routes = () => {
    return (
        <Switch>
            <Route
                exact
                path="/"
                render={() => (
                    <CornerButton to="/route">{btnText}</CornerButton>
                )}
            />
            <Route exact path="/route" render={() => <div>Route</div>} />
        </Switch>
    );
};

it("renders a route change with 'to' prop", async () => {
    render(
        <div>
            <MemoryRouter initialEntries={["/"]}>
                <Routes />
            </MemoryRouter>
        </div>
    );

    const btn = screen.getByRole("button", { name: btnText });
    fireEvent.click(btn);
    const newRoute = screen.getByText(/Route/i);
    expect(newRoute).toBeInTheDocument();
});

我看到了錯誤：

TestingLibraryElementError：無法找到具有以下文本的元素：/Route/i。

該按鈕工作正常，呈現的 HTML 看起來不錯：

<body>
      <div>
        <div>
          <a
            class="sc-jgHCyG begwzL"
            href="/route"
            style="text-decoration: none;"
          >
            <button
              class="sc-bBrOnJ gZtvsD"
              color="primary"
              type="button"
            >
              <div
                class="sc-cOajty wNAWC"
              >
                <div
                  class="sc-khAkjo jvrrvJ"
                >
                  text
                </div>
                <div
                  class="sc-AzgDb fmENQv"
                />
              </div>
            </button>
          </a>
        </div>
      </div>
    </body>

我很想得到一些幫助。

編輯：我更接近解決方案，但行為對我來說似乎很奇怪。 如果我使用： const btn = screen.getByRole("link", { name: btnText });

而不是： const btn = screen.getByRole("button", { name: btnText });

一切正常。 這是否與按鈕的默認行為有關？ 我不在組件內調用preventDefault() 。 但同樣，我在測試之外單擊按鈕沒有問題。

Answer 1

當我嘗試此代碼時，測試通過：

import { Switch, Route, MemoryRouter, Link } from "react-router-dom";
import { render, screen, fireEvent } from "@testing-library/react";

const Routes = () => {
  return (
    <Switch>
      <Route
        exact
        path="/"
        render={() => (
          <div>
            <div>
              <Link to="/route">
                <button color="primary" type="button">
                  <div>
                    <div>btnText</div>
                    <div />
                  </div>
                </button>
              </Link>
            </div>
          </div>
        )}
      />
      <Route exact path="/route" render={() => <div>Route</div>} />
    </Switch>
  );
};

it("renders a route change with 'to' prop", async () => {
  render(
    <div>
      <MemoryRouter initialEntries={["/"]}>
        <Routes />
      </MemoryRouter>
    </div>
  );

  const btn = screen.getByRole("button", { name: "btnText" });
  fireEvent.click(btn);
  const newRoute = screen.getByText(/Route/i);
  expect(newRoute).toBeInTheDocument();
});

因此，您的CornerButton中可能還有其他東西使按鈕在測試中無法正常工作。

React 測試庫：簡單的路由測試錯誤

問題描述

1 個解決方案

解決方案1
1 2021-03-02 03:11:09

React 測試庫：簡單的路由測試錯誤

問題描述

1 個解決方案

解決方案1 1 2021-03-02 03:11:09

解決方案1
1 2021-03-02 03:11:09