Das Testen der Funktionalität der vorherigen und nächsten Schaltflächen in React schlägt fehl
P粉936509635
2023-08-15 13:54:35
<p>Mein React-Code besteht den Test nicht:
Wenn ich es falsch geschrieben habe, können Sie mir helfen, es richtig zu schreiben?
Ich habe versucht, screen.getByRole('button', {name: '>'}) zu verwenden, um die nächste Schaltfläche abzurufen, und screen.getByRole('button', {name: '<'}), um die vorherige Schaltfläche Even abzurufen Ich habe den unten genannten Testcode ausprobiert, aber der Test schlug immer wieder fehl. </p>
<pre class="brush:php;toolbar:false;">Standardfunktion App() exportieren {
zurückkehren (
<div className="App">
<div>
{Hunde
.map((Wert, Schlüssel) => (
<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={() =>
{"<"}
</button>
) : Null}
<span className="card-title-text">{value.title}</span>
{dogCurrPage !== dogs.length - 1 ? (
<button className="next-button" onClick={() =>
{">"}
</button>
) : Null}{" "}
</div>
</div>
))}
</div>
</div>
);
}</pre>
<pre class="brush:php;toolbar:false;">describe("App", () => {
it("Den Klick auf die vorherige Schaltfläche ordnungsgemäß verarbeiten", () => {
render(<App />);
fireEvent.click(screen.getByText("<"));
});
it("Behandeln Sie den Klick auf die Schaltfläche "Weiter" ordnungsgemäß", () => {
render(<App />);
fireEvent.click(screen.getByText(">"));
});
});</pre>
也许尝试这段代码: