測試React中的上一個和下一個按鈕功能失敗
P粉936509635
2023-08-15 13:54:35
<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>
也許嘗試這段程式碼: