Hum ni mình sẽ viết về React testing :)))

À, trước tiên thì khoe với mọi người mình vừa thêm pwa vào trang web, thật ra cũng không có gì thay đổi nhiều lắm nếu bạn không dùng mobile =))) Thêm tí offline với add app thôi :D

Setup

1
yarn add -D @testing-library/react @testing-library/jest-dom

Thêm vào script vào package.json:

1
"test": "react-scripts test --env=jsdom"

Viết test

Chức năng của mấy ví dụ trên thì đơn giản, nó chỉ có 3 sự kiện lớn là

  • Render phát đầu tiên ra những giá trị default là 0, randomID là ``, empty đấy =)))
  • Click vào dấu + thì count sẽ được cộng thêm một và function troll sẽ tính toán đống gì đó rất lâu.
  • Click vào random button thì số sẽ ngẫu nhiên

Import một vài thứ cần thiết:

1
2
3
4
import "@testing-library/jest-dom";
import React from "react";
import { render, screen } from "@testing-library/react";
import App from "../App";

1. Render phát đầu tiên

Test component ở lần render đầu tiên, ở test này thì chỉ cần hiển thị đúng giá trị là được cũng không có event gì xảy ra cả. Cứ test cho nó show đúng giá trị mình cần là được =)))

1
2
3
4
5
6
7
8
9
test("first render", () => {
  render(<App />);
  const h1 = screen.getByText("Hello CodeSandbox");
  const count = screen.getByText("count: 0");
  const troll = screen.getByText("troll: 0");
  expect(h1).toBeInTheDocument();
  expect(count).toBeInTheDocument();
  expect(troll).toBeInTheDocument();
});

2. Click vào dấu + thì…

Ở event thì là khi mình click vào button <button>+</button>, giá trị count sẽ được là 1 và với vô số tính toán phức tạp, giá trị của troll là 124999999567108900, ở đây chủ yếu chúng ta kiểm tra xem những tính toán phức tạp đó có đúng hay không thôi =))))

1
2
3
4
5
6
7
8
9
test("click + button", () => {
  render(<App />);
  const plusButton = screen.getByText("+");
  fireEvent.click(plusButton);
  const count = screen.getByText("count: 1");
  const troll = screen.getByText("troll: 124999999567108900");
  expect(count).toBeInTheDocument();
  expect(troll).toBeInTheDocument();
});

3. Click vào random button

Ở đây thì các bạn biết mà đúng không, random button mình dùng hàm Math.random() để tạo số ngẫu nhiên, và tất nhiên để test tử số 1-10 chưa bao giờ là chuyện dễ dàng, nên việc đầu tiên là mình phải dùng jest để mock Math.random() trả về số mà mình thích.

1
2
3
4
5
6
7
beforeEach(() => {
  jest.spyOn(global.Math, "random").mockReturnValue(0.523456789);
});

afterEach(() => {
  jest.spyOn(global.Math, "random").mockRestore();
});

Tới đây thì mọi thứ dễ hơn rồi nè =)))

1
2
3
4
5
6
7
test("testing random button", () => {
  render(<App />);
  const randomButton = screen.getByText("random");
  fireEvent.click(randomButton);
  const random = screen.getByText("randomID: 5");
  expect(random).toBeInTheDocument();
});

Và kết quả đạt được

https://i.imgur.com/Gp0A4Wa.png

Với vô số phép tính phức tạp thì function troll đã làm tốt nhiệm vụ của nó khi mất hơn 0.6s để tính toán =))

À, các bạn có thể xem code ở đây