使用 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 实施)。
在 运行 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 实施)。