DEV Community

Cover image for React Basics~unit test/ui
Ogasawara Kakeru
Ogasawara Kakeru

Posted on

React Basics~unit test/ui

#webdev #javascript #react #frontend
  • When I test current code, which is unit test, I use some tools. They are jest and react-testing-library.

・src/Example.js

import Greet from "./components/Greet"; const Example = () => { return <Greet />; }; export default Example;
Enter fullscreen mode Exit fullscreen mode

・src/component/Greet.jsx

const Greet = () => { return ( <div> <form> <h1>Hello</h1> <input type="radio" /> <label htmlFor="fullname">Fullname</label> <input id="fullname" type="text" placeholder="Fullname" /> <button>button1</button> <button>button2</button> <img src="/logo512.png" alt="React Logo" /> <h2>Hello2</h2> </form> </div> ); }; export default Greet;
Enter fullscreen mode Exit fullscreen mode

・src/component/Greet.test.jsx

import { render, screen } from "@testing-library/react"; import Greet from "./Greet"; test("Whether elements exists or not", () => { const { debug, container } = render(<Greet />); //get the h1 element const h1El = screen.getByText("Hello"); expect(h1El).toBeInTheDocument(); //get the h2 element by specifying the name const headEl = screen.getByRole("heading", { name: "Hello2" }); debug(headEl); expect(headEl).toBeInTheDocument(); //get radio button const radioEl = screen.getByRole("radio"); debug(radioEl); expect(radioEl).toBeInTheDocument(); //get the img element const imgEl = screen.getByRole("img"); debug(imgEl); expect(imgEl).toBeInTheDocument(); //get the h1 element by getting the alt const imgEl2 = screen.getByAltText("React Logo"); debug(imgEl2); expect(imgEl2).toBeInTheDocument(); //get the h2 element by using the querySelector of container const h2El = container.querySelector("h2"); debug(h2El); expect(h2El).toBeInTheDocument(); //get an element by getting the labe const elByLabel = screen.getByLabelText("Fullname"); debug(elByLabel); expect(elByLabel).toBeInTheDocument(); //get an element by getting the placeholder const elByPlaceholder = screen.getByPlaceholderText("Fullname"); debug(elByPlaceholder); expect(elByPlaceholder).toBeInTheDocument(); });
Enter fullscreen mode Exit fullscreen mode

  • The test function is a function of test.

  • The first argument is a test title. The second argument is a callback function that executes the test code.

-In the callback function, I need to render a component that will be tested using a render function. And I can use debug and container if necessary.

const { debug, container } = render(<Greet />);
Enter fullscreen mode Exit fullscreen mode

  • And then, I need to get an element using screen.*.
    There are plenty of functions like getByText(), getByRole(), getByAltText() and so on.

  • Finally, I need to know if the element exists in the document, using expect(element which I got before).toBeInTheDocument();.

  • After writing the test code, I need to run this command npm test.

・Success(The taest passed)

Image description

・Failure(The taest failed)

Image description

Top comments (0)