使用 React 测试库涵盖 React 代码的问题

Issues covering code in react using react testing library

在 运行 yarn test:coverage 之后,PicklistDetails.js 显示第 28-33 行未被覆盖 - 尽管我相信它们被覆盖。

yarn test:coverage的输出(省略不相关的输出):

File % Stmts % Branch % Funcs % Lines Uncovered Line #s
PicklistDetails.js 100 80 100 100 28-33
PASS  src/pages/__tests__/PicklistDetails.test.js
  ● Console

    console.log
      response.ok = true

      at fetchPicklist (src/pages/PicklistDetails.js:27:15)

    console.log
      response = [object Object]

      at fetchPicklist (src/pages/PicklistDetails.js:28:15)

PicklistDetails.js(通过未测试的行):

import { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import { useUserContext } from "../context/User";
import { getPicklist } from "../services/picklists";

import Typography from "../ui/Typography";

import pending from "../images/pending.svg";
import partiallyFulfilled from "../images/partially-fulfilled.svg";
import fulfilled from "../images/fulfilled.svg";
import notFulfilled from "../images/not-fulfilled.svg";

function PicklistDetails() {
  const { accessToken } = useUserContext();
  const { id } = useParams();

  const [loading, setLoading] = useState(true);
  const [picklistDetails, setPicklistDetails] = useState({});

  useEffect(() => {
    let isMounted = true;
    setLoading(true);

    const fetchPicklist = async () => {
      const { response, json } = await getPicklist(accessToken, id);
      console.log(`response.ok = ${response.ok}`);
      console.log(`response = ${response}`);

      // Line 28 is the next line
      if (response.ok && isMounted) {
        const picklistDetails = json["picklist_details"];
        setPicklistDetails(picklistDetails);
      }

      if (isMounted) {
        setTimeout(setLoading, 500, false);
      }
    };

    fetchPicklist();

    return () => (isMounted = false);
  }, []);
}

export default PicklistDetails;

PicklistDetails.test.js:

import { render as rtlRender, screen, waitFor } from "@testing-library/react";
import { Route, BrowserRouter, Switch } from "react-router-dom";

import { UserProvider } from "../../context/User";

import PicklistDetails from "../PicklistDetails";

const render = (ui, { route = "/" } = {}) => {
  window.history.pushState({}, "Test page", route);

  return rtlRender(ui, { wrapper: BrowserRouter });
};

describe("The PicklistDetails component", () => {
  beforeEach(() => {
    const route = "/picklist/3d08d5f6-307b-49e7-ab15-7345e9b45355";
    render(
      <UserProvider>
        <Switch>
          <Route path="/picklist/:id">
            <PicklistDetails />
          </Route>
        </Switch>
      </UserProvider>,
      { route }
    );
  });

  describe("renders", () => {
    test("the market", async () => {
      await waitFor(() => {
        const market = screen.getByText("Market name");
        expect(market).toBeInTheDocument();
      });
    });
  });
});

response.ok 确认为真,isMounted 确认为真,我不明白为什么这些线被认为是未发现的。

% Branch 的报道失败,因为根据您所说的,您没有涵盖 response.ok 为假的情况。

报道记者希望您涵盖 if 声明中的所有组合,如果您查看报道报告,文本会以黄色而不是红色突出显示。

有关更多信息,请参阅 the docs on Istanbul(可能是您的报道记者,除非您有自定义 Jest 实施)。