{"id":18830711,"url":"https://github.com/ssi02014/react-test-reference-documentation","last_synced_at":"2025-04-14T03:43:19.270Z","repository":{"id":49320453,"uuid":"517264748","full_name":"ssi02014/react-test-reference-documentation","owner":"ssi02014","description":"리액트 테스트 관련 참고 문서 저장소 (Jest, React-Testing-Library) 🧑‍💻","archived":false,"fork":false,"pushed_at":"2023-07-14T09:15:09.000Z","size":52,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T17:47:00.474Z","etag":null,"topics":["jest","matcher","react","react-testing-library","tdd","testing"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ssi02014.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-24T08:12:59.000Z","updated_at":"2025-02-27T15:30:49.000Z","dependencies_parsed_at":"2022-08-27T19:10:40.033Z","dependency_job_id":null,"html_url":"https://github.com/ssi02014/react-test-reference-documentation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-test-reference-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-test-reference-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-test-reference-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssi02014%2Freact-test-reference-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssi02014","download_url":"https://codeload.github.com/ssi02014/react-test-reference-documentation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819111,"owners_count":21166470,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","matcher","react","react-testing-library","tdd","testing"],"created_at":"2024-11-08T01:50:00.619Z","updated_at":"2025-04-14T03:43:19.251Z","avatar_url":"https://github.com/ssi02014.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💻 리액트 테스트 참고 문서 저장소\n\n- 해당 저장소는 [Jest](https://jestjs.io/), [React-Testing-Library](https://testing-library.com/)를 통해 테스트를 진행하면서 자주 확인하게되는 `쿼리 우선순위`, `역할의 종류`,`Screen Query`, `jest matchers`, `fireEvent(userEvent) 이벤트 종류` 등을 알아보기 쉽게, 공식 문서를 찾아보기 쉽게 정리한 저장소입니다.\n- 오탈자 및 수정이 필요한 내용은 `pull request`, `issue` 등 자유롭게 남겨주시면 반영하겠습니다.\n\n\u003cbr /\u003e\n\n## 🌟 Contributors\n\n[![contributors](https://contrib.rocks/image?repo=ssi02014/React-Test-Documents-To-Reference)](https://github.com/ssi02014/React-Test-Documents-To-Reference/graphs/contributors)\n\n\u003cbr /\u003e\n\n## 📄 목차\n\n1. [React Testing Library](#react-testing-library)\n2. [대표적인 테스트 유형](#테스트-유형)\n3. [RTL과 접근성](#rtl과-접근성)\n4. [쿼리 우선순위](#쿼리-우선순위)\n5. [역할의 종류](#역할의-종류)\n6. [Screen Query](#screen-query)\n7. [Jest Matchers](#jest-matchers)\n8. [fireEvent](#fireevent)\n9. [userEvent](#userevent)\n\n\u003cbr /\u003e\n\n- Others\n\n1. [React Testing Library, jest-dom ESLint Setting](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/eslint.md)\n2. [React Testing Library에서 자주하는 실수 및 해결](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## React Testing Library\n\n### React Testing Library 사용 이유 ❓\n\n- RTL(React Testing Library)는 `테스트를 위한 가상 DOM을 생성`하고 생성한 DOM과 상호 작용하기 위한 `유틸리티`도 제공한다. 예를 들어, DOM에서 요소를 찾거나 클릭과 같이 요소와 상호 작용할 수 있다. 또한, 브라우저 없이 테스트도 가능하다.\n\n\u003cbr /\u003e\n\n### 주의 사항 ❗️\n\n- RTL을 처음 접할 때면 RTL을 Jest의 대안으로 혼동하는 경우가 더러 있다.\n- 두 도구는 React 내에서 테스트를 진행할 때 같이 사용되기에 `상호 보완 관계`라고 볼 수 있다. (엄밀히 말하자면, RTL이 Jest를 포함하는 구조)\n- 전반적으로 Jest를 통해 기능 테스트를 진행할 수는 있지만, React의 컴포넌트를 렌더링하고 테스트하기 위해서는 몇 가지 기능이 더 필요하다.\n  - Jest - 자체적인 `test runner`와 `test util` 제공\n  - RTL - `Jest + React 컴포넌트 test util` 제공\n\n\u003cbr /\u003e\n\n## 테스트 유형\n\n- 유닛(Unit) 테스트\n\n  - 보통 함수나 별개의 React 컴포넌트 코드의 한 `유닛 혹은 단위를 테스트`한다.\n  - 유닛 테스트의 특징은 다른 코드의 유닛과 상호 작용하는 것은 테스트하지 않는다.\n\n- 통합(Intergration) 테스트\n\n  - 여러 유닛이 함께 동작하는 방식을 테스트해서 `유닛 간의 상호 작용`을 테스트하는 것이다. 예를 들어 컴포넌트 간의 상호 작용을 테스트 하거나 마이크로 서비스 간의 상호 작용을 테스트한다.\n\n- 기능(functional) 테스트\n\n  - 소프트웨어의 `특정 기능`을 테스트하는 것이다.\n  - 헷갈릴 수 있는게 function은 프로그래밍 언어에서 입력값을 취하고 출력을 제공하는 소프트웨어 단위(Unit)의 함수를 의미할 수도 있고, `소프트웨어의 동작`을 의미할 수도 있는데 이 경우에는 특정 코드 함수가 아닌 소프트웨어 동작에 해당한다. 즉, 기능 테스트의 의미는 코드가 아닌 `동작`을 테스트하는 것이다.\n\n- 인수(Acceptance) 테스트 혹은 End to End (E2E) 테스트\n\n  - 실제 사용자 환경에서 사용자의 입장으로 테스트를 수행하는 것을 의미한다.\n  - 실제 `브라우저`가 필요하고 애플리케이션이 연결된 `서버`가 필요하다. 보통 `Cypress`나 `Selenium`과 같은 도구가 필요하다. 참고로 이 테스트는 `RTL을 위해 설계된 테스트는 아니다.`\n\n\u003cbr /\u003e\n\n### RTL은 유닛 테스트보다 기능 테스트를 권장 한다.\n\n- 즉, 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것을 권장하는 것이다.\n  - 예를 들어 `\u003cdiv\u003eHello World\u003c/div\u003e`라는 코드가 있다면, RTL은 div 태그를 사용하는지보다 `Hello World` 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 본다.\n- `기능`에 초점을 맞춘 테스트 방식은 신뢰도를 높임과 동시에 코드 리팩토링 시 테스트 코드 수정 빈도를 줄일 수 있습니다.\n\n\u003cbr /\u003e\n\n## RTL과 접근성\n\n- RTL은 우리의 웹사이트가 `어떻게 사용되는지 최대한 가깝게` 테스트를 작성할 수 있도록 장려하는 메서드와 유틸리티를 제공한다.\n- 테스트 할 때 실제 사용자가 쓰는 것처럼 해야 하는데 여기에 `스크린 리더`와 같은 `접근성 인터페이스`도 포함된다.\n- 접근성을 준수하기위해 어떤 쿼리를 우선순위로 사용해야되는 지는 아래를 참고하자.\n\n\u003cbr /\u003e\n\n## 쿼리 우선순위\n\n- 아래 문서를 통해 `가상 DOM`에서 요소를 찾을 때 어떤 쿼리를 우선 순위로 사용해야 하는지 참고하자.\n- [쿼리 우선순위(priority)](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/priority.md)\n\n\u003cbr /\u003e\n\n## 역할의 종류\n\n- [쿼리 우선순위(priority)](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/priority.md)를 봤으면 `*ByRole`을 사용하는 방법 즉, `역할`을 통해 요소를 찾을 수 있고, 실제로 `스크린 리더`에서 액세스 할 수 있다. 따라서 접근성을 보장하기때문에 요소를 찾을때 `가장 선호되는 방법`이다.\n- `*ByRole`은 여러 역할을 활용 할 수 있는데 이는 아래 문서들을 확인하고 참고하자.\n  - [W3C - ARIA in HTML](https://www.w3.org/TR/html-aria/#docconformance)\n  - [W3C - 역할 종류](https://www.w3.org/TR/wai-aria/#role_definitions)\n  - [ARIA - Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles)\n\n\u003cbr /\u003e\n\n- 참고로 role 속성을 사용해서 `div`와 같은 요소에도 특정 역할을 추가할 수 있다. 코드에는 단순히 `role=\"\"`처럼 속성을 추가하면 된다.\n- 일반적으로 스크린 리더에서 테스트 요소를 찾을 수 없으면, 그건 우리의 앱이 스크린 리더에 친화적이지 않은 거고 접근성에서 안좋다는 의미이다 ❗️\n- 아래 예제는 role 속성을 통해 역할을 부여한 예제이다.\n\n```html\n\u003cdiv role=\"textbox\"\u003e\u003c/div\u003e\n```\n\n```js\nconst textbox = screen.getByRole(\"textbox\");\n\nexpect(textbox).toBeEmptyDOMElement();\n```\n\n\u003cbr /\u003e\n\n## Screen Query\n\n- Screen Query는 페이지에서 `요소를 찾기 위해` Testing Library가 제공하는 방법입니다.\n- 아래 문서를 통해 Screen Query에대해 알아보자.\n- [Screen Query](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/screen-query.md)\n\n```html\n\u003cbutton type=\"submit\" disabled\u003esubmit\u003c/button\u003e\n```\n\n```js\nimport { screen } from \"@testing-library/react\";\n\n// getByRole screen query 사용\nconst button = screen.getByRole(\"button\", {\n  name: \"submit\",\n});\n\nexpect(button).toBeDisabled();\n```\n\n\u003cbr /\u003e\n\n## Jest Matchers\n\n- Jest는 `matcher`를 사용하여 다양한 방식으로 값을 테스트할 수 있습니다.\n- 아래 문서를 통해 다양한 Jest의 Matcher를 알아보자\n- [Jest Matchers](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/jest-matchers.md)\n\n```html\n\u003cinput type=\"text\" /\u003e\n```\n\n```js\nconst input = screen.getByRole(\"textbox\");\n\nexpect(input).toBeInTheDocument(); // toBeInTheDocument matcher 사용\n```\n\n\u003cbr /\u003e\n\n## fireEvent\n\n- [RTL - fireEvent 공식 문서](https://testing-library.com/docs/dom-testing-library/api-events/)\n- fireEvent는 쿼리 함수로 선택된 영역을 대상으로 `특정 이벤트를 발생시키기 위한 이벤트 함수들을 담고 있다.`\n- fireEvent는 아래와 같이 기본적인 포맷을 갖고 있다.\n\n```\nfireEvent(node: HTMLElement, event: Event)\n```\n\n- fireEvent가 갖고있는 이벤트 함수들은 아래 사이트를 참고하자.\n- [fireEvent 이벤트 함수 종류들](https://github.com/testing-library/dom-testing-library/blob/main/src/event-map.js)\n\n```js\nimport { render, screen, fireEvent } from \"@testing-library/react\";\n\ntest(\"버튼을 클릭하면 배경색이 빨간색으로 변경한다.\", () =\u003e {\n  render(\u003cMyComponent /\u003e);\n  const button = screen.getByRole(\"button\", {\n    name: \"button\",\n  });\n\n  fireEvent.click(colorButton);\n  expect(colorButton).toHaveStyle({ backgroundColor: \"red\" });\n});\n```\n\n\u003cbr /\u003e\n\n## userEvent\n\n- [RTL - userEvent 공식 문서](https://testing-library.com/docs/user-event/intro)\n- [RTL - fireEvent 공식 문서](https://testing-library.com/docs/dom-testing-library/api-events/)를 보면 실제로 fireEvent도 좋지만 대부분의 경우 userEvent를 사용해야된다고 언급된다.\n- 일반적으로 fireEvent에 비해 userEvent가 사용자 이벤트를 `더욱 완전하고 현실적인 방식으로 시뮬레이션 한다.`\n- 쉽게 말하면, 사용자가 실제 웹사이트를 이용하는 플로우대로 시뮬레이션한다.\n\n```\nMost projects have a few use cases for fireEvent, but the majority of the time you should probably use @testing-library/user-event.\n```\n\n- userEvent에대해서는 아래 문서를 통해 자세히 알아보자.\n- [userEvent](https://github.com/ssi02014/React-Test-Documents-To-Reference/blob/master/docuemnts/userEvent.md)\n\n\u003cbr /\u003e\n\n## Jest에서 it과 test의 차이\n\n- jest에서 `it은 test의 별칭`이며, 따라서 기능이 완전히 동일하다.\n- 하지만, 이름이 다르기 때문에 테스트 이름 작성하는 부분에서 약간의 차이가 있다. 테스트 이름 가독성에 맞게 어느 것을 선택할지 결정하면 된다.\n\n```ts\ntest(\"if it does the other thing\", () =\u003e {});\ntest(\"if it does the other thing\", () =\u003e {});\n```\n\n```ts\nit(\"should do this thing\", () =\u003e {});\nit(\"should do the other thing\", () =\u003e {});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Freact-test-reference-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssi02014%2Freact-test-reference-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssi02014%2Freact-test-reference-documentation/lists"}