###### tags: 今晚，就該來點前端測試 (P-1), frontend UT, test
# Note : Testing React with Jest and React Testing Library (RTL) (P-1)

作為一個菜鳥，覺得前端測試不好入手的一點在於他使用了超多套件，這些套件組成了一個測試生態系，到底誰負責了什麼，他誰？

理解這些套件各自負責什麼會打通你的任督第一脈

學習重點：
1. 測試生態系的這些套件各自負責了哪些項目
2. 指令
3. react testing 的精神與 functional test
4. 在虛擬 dom 上找 element，使用找法的優先順序是什麼

# type of test
1. unit test
2. integration test
3. functional test - testing your behavior
4. acceptance test (e2e tests) - use actual browser and server (Cypress, Selenium)


# React testing library
1. create virtaul dom for testing and utilities for interacting with DOM
2. allows testing withour browser
## 核心
1. not interal implementation，而是測試使用者會怎麼操作
2. find element by accessibility markers 而不是使用 testing ids. （因為這樣 screen readers 才可以找到）

## react testing library vs jest
* react testing library
* provides virtual dom for tests
* 1. rendering component with virtual DOM (ex-render method)
* 2. searching virtual DOM (ex - getByText method)
* 3. interacting with virtaul DOM
* jest
* tests runners
* 1. find test
* 2. run test
* 3. determine whether test pass or fail (ie. make assertions)

# ex
1. create react app
* configuration
* webpack and babel
* web server
* testing library
2. learning syntax of the test
### 指令
npm test - run test in **watch mode** (ie. watch for changes in file since last commit). Hence, No changes, No tests.

1. a - run all tests
2. q - quit watch mode

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

* render - by this function creates virtual DOM for argument JSX. 這裡的 jsx 是 APP
* screen - access virtual DOM via this global object
* screen.getByText(): find an element on DOM based on whatever text is's displaying.
* assertion - causes the test to succeed or fail

# assertion
1. expect: jest global method, starts the assertion
2. expect argument: subject of the assertion
3. matcher: the assertion type that comes from jest-DOM
4. matcher argument

## jest - dom
1. comes with create-react-app
2. src/setupTest.js imports it before each test, makes matchers available.
3. Dom-based matchers

## jest
how does jest work?

global test method has two argument
1. string description
2. test function

Test fails if error is thrown when running function. Assertions throw error when expectation fails. Hence, empty test should pass.

test("renders learn react link", () => {
  throw new Error("故意讓他死掉");
});

# accessibility and finding elements
testing library recommends finding elements by accessibility handles

[About Queries](https://testing-library.com/docs/queries/about/#priority)
[怎麼知道使用哪一個 role](https://www.w3.org/TR/wai-aria/#role_definitions)

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByRole("link", { name: /learn react/i });
  expect(linkElement).toBeInTheDocument();
});

# soure
Testing React with Jest and React Testing Library (RTL)