- 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;
・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;
・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();
});
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 />);
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)
・Failure(The taest failed)
Top comments (0)