Error: Unable to find an element with the text when I try a test with Jest in React

Henrique

I'm news with tests, se, here is my problem

I have that simple login component:

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>
  );
}

I here my test attempty:

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)
    );
  });
});

the error that returns: Unable to find an element with the text: [email protected]. 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.

skyboyer

getByText looks by text content. value attribute is not text content but just one of attributes. So it will not find input by this approach.

Also it's kind of not idiomatic to search by thing you are going to assert for. Better find element by it's static properties and then check for dynamic value:

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

PS To be more "RTL-approach" I'd also suggest to use getByPlaceholderText instead of getByTestId.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

React test unable to find an element mocked with jest

Error on jest when I try to run the test

Unable to find an element with the text: "myText" error when using react-testing-library

Jest Test logs an error when I try to use toThrow() on an Async Function (but still passes test)

REACT Typescript JEST test does not find text

Tests fails when trying to run jest on a react native application. Unable to find "setupDevtools" error

Error: Unable to find a match phpmyadmin when i try to install phpmyadmin on centos

Test React element height with Jest

React native typescript throws error when running jest test command

React / Enzyme: Invariant Violation error when running Jest / Enzyme test

when I use jest to test react component it throws "Invariant Violation:Element type is invalid: expected a string (for built-in components)"

React jest test with enzyme error

react-native app error when try and test in emulator(?)

Jest is unable to find module from test file

How can I fix this error when I try to find a palindrome?

I am getting this error when i try to find a RecyclerView by id

"Unable to find an element with the text.." during react testing

React array returns undefined when i try to get specific element of it

Gcc throws error when I try to compile the test folder in libburn

Make file error when I try to do with linking the test file

Why I get error when try append element to document?

Borrow error when I try to modify last element of a vector

When i try to create react project i get error

when i try to create a text file the following error is thrown

React - Firebase module error when i try to import 'firebase/app'

error when I try import DropDown react-native

React Unable To Find img Element

Getting Cannot find module 'react-apollo/test-utils' error in jest teact native

Jest/Enzyme test React component with async/await method in try/catch