web-dev-qa-db-fra.com

Erreur: impossible de trouver un élément avec le texte lorsque j'essaye un test avec Jest dans React

Je suis des nouvelles avec des tests, voici mon problème

J'ai ce composant de connexion simple:

import React, { useState } from "react";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function handleLogin(event) {
    event.preventDefault();
    console.log(email, password);
  }

  return (
    <form data-testid="login-form" onSubmit={handleLogin}>
      <input
        data-testid="useremail"
        type="email"
        placeholder="Email"
        value={email}
        onChange={event => setEmail(event.target.value)}
      />

      <input
        data-testid="userpassword"
        type="password"
        placeholder="Password"
        value={password}
        onChange={event => setPassword(event.target.value)}
      />
      <button onClick={handleLogin}>login</button>
    </form>
  );
}

J'ai ici ma tentative de test:

import React from "react";
import Login from "../pages/Login";

import { render, fireEvent } from "@testing-library/react";

describe("Login component", () => {
  it("user sent email and password", () => {
    const username = "[email protected]";
    const password = "123456";

    let { getByText, getByTestId } = render(<Login />);

    fireEvent.change(getByTestId("useremail"), {
      target: { value: username }
    });

    fireEvent.change(getByTestId("userpassword"), {
      target: { value: password }
    });

    fireEvent.submit(getByTestId("login-form"));

    expect(getByTestId("login-form")).toContainElement(
      getByText(username, password)
    );
  });
});

l'erreur qui renvoie: Impossible de trouver un élément avec le texte: [email protected]. Cela peut être dû au fait que le texte est divisé en plusieurs éléments. Dans ce cas, vous pouvez fournir une fonction pour votre correspondance de texte pour rendre votre matcher plus flexible.

reactjstestingjestjstddreact-testing-library
3
Henrique

getByText ressemble par contenu de texte . L'attribut value n'est pas un contenu textuel mais juste l'un des attributs. Il ne trouvera donc pas d'entrée par cette approche.

De plus, il n'est pas idiomatique de rechercher par chose que vous allez affirmer. Mieux vaut rechercher l'élément par ses propriétés statiques, puis vérifier la valeur dynamique:

expect(getByTestId("useremail").value).toEqual("[email protected]");

PS Pour être plus "approche RTL", je suggère également d'utiliser getByPlaceholderText au lieu de getByTestId.

3
skyboyer