[英]react-testing-library and MSW
I have been trying to implement some tests on my project, but I got some blockers.我一直在尝试对我的项目进行一些测试,但我遇到了一些障碍。
This error:这个错误:
Unable to find an element with the text: C-3PO/i.无法找到带有以下文本的元素:C-3PO/i。 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.
在这种情况下,您可以为您的文本匹配器提供一个功能,以使您的匹配器更加灵活。
I don't know how to fix it.我不知道如何解决它。 Should I use another query or I am missing something?
我应该使用另一个查询还是我遗漏了什么?
import { render, screen } from "@testing-library/react";
import CharacterList from "./index";
import { rest } from "msw";
import { setupServer } from "msw/node";
const server = setupServer(
rest.get("https://swapi.dev/api/people/", (req, res, ctx) => {
return res(
ctx.json({ results: [{ name: "Luke Skywalker", gender: "male" }] })
);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
describe("render characters", () => {
it("should render character C-3PO when get api response", async () => {
render(<CharacterList />);
const character = await screen.findByText("C-3PO/i");
expect(character).toBeInTheDocument();
});
});
and my component:和我的组件:
import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
export default function CharactersList() {
const [data, setData] = useState(undefined);
const [home, setHome] = useState(undefined);
useEffect(() => {
fetch("https://swapi.dev/api/people/")
.then((response) => {
if (response) {
return response.json();
} else {
return Promise.reject(response);
}
})
.then((data) => {
setData(data);
});
}, []);
if (data) {
return data.results.map((item) => {
const id = item.url.slice(29);
return (
<>
<NavLink to={`/character/${id}`}>{item.name}</NavLink>
<p>Gender: {item.gender}</p>
<p>Home planet: {item.homeworld}</p>
</>
);
});
} else {
return <p>Loading...</p>;
}
}
Please Add screen.debug()
to see your actual screen, from that you can consider which get method will work to you.请添加
screen.debug()
以查看您的实际屏幕,从中您可以考虑哪种 get 方法对您有用。
I think the problem is you don't have C-3PO/i
text in the DOM我认为问题是您在 DOM 中没有
C-3PO/i
文本
describe("render characters", () => {
it("should render character C-3PO when get api response", async () => {
render(<CharacterList />);
screen.debug(); <------- ADD THIS
const character = await screen.findByText("C-3PO/i");
expect(character).toBeInTheDocument();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.