title: Error: Unable to find an element with the text when I try a test with Jest in React
body: <p>I'm news with tests, se, here is my problem</p>
  
  <p>I have that simple login component:</p>
  
  <pre><code>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 (
      &lt;form data-testid="login-form" onSubmit={handleLogin}&gt;
        &lt;input
          data-testid="useremail"
          type="email"
          placeholder="Email"
          value={email}
          onChange={event =&gt; setEmail(event.target.value)}
        /&gt;
  
        &lt;input
          data-testid="userpassword"
          type="password"
          placeholder="Password"
          value={password}
          onChange={event =&gt; setPassword(event.target.value)}
        /&gt;
        &lt;button onClick={handleLogin}&gt;login&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  
  </code></pre>
  
  <p>I here my test attempty:</p>
  
  <pre><code>import React from "react";
  import Login from "../pages/Login";
  
  import { render, fireEvent } from "@testing-library/react";
  
  describe("Login component", () =&gt; {
    it("user sent email and password", () =&gt; {
      const username = "user@gmail.com";
      const password = "123456";
  
      let { getByText, getByTestId } = render(&lt;Login /&gt;);
  
      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)
      );
    });
  });
  </code></pre>
  
  <p>the error that returns:
      <em>Unable to find an element with the text: user@gmail.com. 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.</em></p>