mirror of
https://github.com/wassname/Open-Assistant.git
synced 2026-06-29 16:30:24 +08:00
ericv105
73 lines
3.2 KiB
Markdown
73 lines
3.2 KiB
Markdown
# Unit testing with Jest and React Testing Library
|
|
|
|
[Jest](https://jestjs.io/) is a test runner that is commonly coupled with
|
|
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for creating unit tests.
|
|
|
|
## Creating tests
|
|
|
|
To begin writing tests, create a file ending in `.test.ts` for non-React code or a file ending with `.test.tsx` for
|
|
testing React code. For example, a test file for React component `TaskOption.tsx` would be named `TaskOption.test.tsx`
|
|
and would be created within the same directory as the component.
|
|
|
|
```
|
|
// TaskOption.test.tsx
|
|
import { fireEvent, render, screen } from "@testing-library/react";
|
|
import { RouterContext } from "next/dist/shared/lib/router-context";
|
|
import React from "react";
|
|
import { createMockRouter } from "src/test-utils/createMockRouter";
|
|
|
|
import { OptionProps, TaskOption } from "./TaskOption";
|
|
|
|
describe("TaskOption component", () => {
|
|
const testProps: OptionProps = {
|
|
title: "Task Title",
|
|
alt: "Task Title",
|
|
img: "/imgPath",
|
|
link: "/fake/path",
|
|
};
|
|
|
|
it("should render", () => {
|
|
render(<TaskOption {...testProps} />);
|
|
expect(screen.getByRole("heading")).toHaveTextContent("Task Title");
|
|
expect(screen.getByRole("img")).toHaveAttribute("alt", "Task Title");
|
|
expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
|
|
});
|
|
|
|
it("should navigate properly on click", () => {
|
|
const router = createMockRouter({ pathname: "/fake/path" });
|
|
render(
|
|
<RouterContext.Provider value={router}>
|
|
<TaskOption {...testProps} />
|
|
</RouterContext.Provider>
|
|
);
|
|
expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
|
|
fireEvent.click(screen.getByRole("link"));
|
|
expect(router.push).toHaveBeenCalledWith("/fake/path", expect.anything(), expect.anything());
|
|
});
|
|
});
|
|
|
|
```
|
|
|
|
This is a test that checks if the component has rendered correctly and if it navigates properly on click. The testing
|
|
methods, component, and its props type are imported. The `describe` is a Jest method that is used to group related tests
|
|
together while the `it` is what actually runs a test.
|
|
|
|
A testProps object is created and passed to the component to be rendered using the `render` method. Now it can be
|
|
tested. Query methods like `getByRole` and others listed in the
|
|
[testing library's docs](https://testing-library.com/docs/react-testing-library/cheatsheet#queries) can be used to
|
|
search for elements in the page. Finally, `expect` is run on those elements to see if they match the values in the props
|
|
that were originally declared. If they match, the test passes. If they do not match or if an error occurs, the test
|
|
fails.
|
|
|
|
In the second test, a mock router is used to simulate Next's router. The TaskOption component is rendered with the
|
|
router as its parent. To simulate a click, `fireEvent.click()` is used on the element with the role of "link". Finally,
|
|
the router can be tested by verifying that the `router.push` method was called with the correct path. Since the push
|
|
method is also called with two more arguments `as` and `options` that aren't useful for this specific test,
|
|
`expect.anything()` is used to ensure that those arguments are not null or undefined.
|
|
|
|
## Running tests
|
|
|
|
```
|
|
npm run jest
|
|
```
|