<p>我的React代码测试失败:
如果我写错了,你能帮忙写对吗?
我尝试使用screen.getByRole('button', {name: '>'})来获取下一个按钮,使用screen.getByRole('button', {name: '<'})来获取上一个按钮,甚至尝试了下面提到的测试代码,但测试一直失败。</p>
<pre class="brush:php;toolbar:false;">export default function App() {
return (
<div className="App">
<div>
{dogs
.map((value, key) => (
<div className="card-container" key={key}>
<div>
<img className="img" src={value.imgUrl} alt={value.title} />
</div>
<div className="card-footer">
{dogCurrPage !== 1 ? (
<button className="back-button" onClick={() => previous()}>
{"<"}
</button>
) : null}
<span className="card-title-text">{value.title}</span>
{dogCurrPage !== dogs.length - 1 ? (
<button className="next-button" onClick={() => next()}>
{">"}
</button>
) : null}{" "}
</div>
</div>
))}
</div>
</div>
);
}</pre>
<pre class="brush:php;toolbar:false;">describe("App", () => {
it("正确处理上一个按钮的点击", () => {
render(<App />);
fireEvent.click(screen.getByText("<"));
});
it("正确处理下一个按钮的点击", () => {
render(<App />);
fireEvent.click(screen.getByText(">"));
});
});</pre>
也许尝试这段代码:
describe("App", () => { it("正确渲染应用程序", async() => { render( < App / > ); // 根据您的UI组件添加更具体的断言 expect(screen.getByText("Fetch Api, display 1 card, add comments and likes to those comments")).toBeInTheDocument(); }); it("正确处理上一个按钮的点击", async() => { render( < App / > ); fireEvent.click(screen.getByRole("button", { name: "<" })); // 添加断言以检查点击上一个按钮后的行为 }); it("正确处理下一个按钮的点击", async() => { render( < App / > ); fireEvent.click(screen.getByRole("button", { name: ">" })); // 添加断言以检查点击下一个按钮后的行为 }); });