{"id":26166374,"url":"https://github.com/edyane/jest-guide","last_synced_at":"2026-04-18T07:32:30.531Z","repository":{"id":276140543,"uuid":"854319259","full_name":"Edyane/jest-guide","owner":"Edyane","description":" React Testing Library and Jest: The Complete Guide","archived":false,"fork":false,"pushed_at":"2025-02-06T14:01:49.000Z","size":534,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T14:12:46.526Z","etag":null,"topics":["jest","react","testing","testing-library","unit-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Edyane.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-09T00:15:44.000Z","updated_at":"2025-02-06T15:49:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"00a30ae0-742b-4496-9b6b-2d69ab9f5d9d","html_url":"https://github.com/Edyane/jest-guide","commit_stats":null,"previous_names":["edyane/jest-guide","cremebruleebr1/jest-guide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Edyane/jest-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edyane%2Fjest-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edyane%2Fjest-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edyane%2Fjest-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edyane%2Fjest-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Edyane","download_url":"https://codeload.github.com/Edyane/jest-guide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edyane%2Fjest-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31961182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","react","testing","testing-library","unit-testing"],"created_at":"2025-03-11T16:52:28.743Z","updated_at":"2026-04-18T07:32:30.516Z","avatar_url":"https://github.com/Edyane.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📚 **React Testing Library and Jest: The Complete Guide** \n\nA super important part of testing is **finding the elements** that our component has created:\n\n- 📝 **Need to test form submission?** You need to find a **button** to click!\n- 🔗 **Need to test navigation?** You need to find a **link** to click!\n- 🏷️ **Need to ensure a header is visible?** You need to find a **header**!\n\n---\n\n### 🎯 **React Testing Library Query System**\n\nA collection of **48 functions** used to find elements.\n\n**Partial list of functions:**\n\n- `screen.getByRole()`\n- `screen.queryByRole()`\n- `screen.findAllByTitle()`\n- `screen.findAllByDisplayValue()`\n- `screen.findByRole()`\n- `screen.findByTitle()`\n- `screen.queryAllByRole()`\n- `screen.queryByLabelText()`\n- `screen.getByLabelText()`\n\n**Important:** You do **not** need to **memorize** all of these!\n\n---\n\n### 🦸‍♀️ **ARIA Roles**\n\n- **ARIA Roles** clarify the purpose of an HTML element.\n- Traditionally used by **screen readers** (software helping visually impaired users understand content on screen).\n- Many HTML elements have an **implicit** role automatically assigned.\n- Elements can also be manually assigned a role, but even trained engineers can make mistakes!\n\n---\n\n### ✨ **Matchers from Jest**\n\nSome examples of **Matchers from Jest**:\n\n- `expect(['a', 'b']).toHaveLength(2)` — Ensures the value is an **array** with the correct length.\n- `expect(5).toEqual(5)` — Ensures the value equals another value.\n- `expect(['a', 'b', 'c']).toContain('b')` — Ensures the array (or string) contains a specific value.\n- `expect(fn).toThrow()` — Ensures a function throws an error.\n- `expect(mock).toHaveBeenCalled()` — Ensures a **mock** function has been called.\n\n---\n\n### 🧪 **Matchers from React Testing Library**\n\nExamples of **Matchers from React Testing Library**:\n\n- `expect(element).toBeInTheDocument()` — Ensures the element is on the page.\n- `expect(element).toBeEnabled()` — Ensures the element (like an input) is **not disabled**.\n- `expect(element).toHaveClass()` — Ensures the element has a specific **class**.\n- `expect(element).toHaveTextContent()` — Ensures the element has specific **text**.\n- `expect(element).toHaveValue()` — Ensures an input, select, or textarea has a specific value.\n- `user.click(element)` — Simulates clicking on the element.\n- `user.keyboard('text')` — Simulates typing the text **'text'**.\n- `user.keyboard('{Enter}')` — Simulates pressing the **Enter** key.\n\n---\n\n### 🔍 **Mock Functions**\n\n- **Mock** can mean **\"not real\"**: it is a **fake function** that doesn't do anything.\n- It **records** whenever it is called and the **arguments** it was called with.\n- It's often used when we want to ensure a component **calls a callback function**.\n\n---\n\n### 📝 **Normal HTML Behavior** (Not React Specific)\n\n- If a **label's** `for` attribute matches an **input's** `id`, clicking on the label will **focus** the input.\n\n#### Examples of how to select inputs:\n\n- `screen.getByLabelText(/enter email/i)`\n- `screen.getByRole('textBox', { name: /enter email/i })`\n\n---\n\n### 🎯 **Querying for Elements**\n\nRemembering all the query functions and roles can be difficult, right? 😅  \nUse this **helper function** to find an element:\n\n```js\nscreen.logTestingPlaygroundURL()\n```\n\nThis function creates a link to the **Testing Playground**, where you can view the rendered HTML and write queries to find elements.  \n**Tip:** Sometimes, querying by role doesn't work well. Don't obsess over getting the **\"perfect\" query**. Use these **two escape hatch** methods when needed!\n\n---\n\n### 📍 **Looking for a single element?**  \nUse:\n\n- `getBy`, `queryBy`, `findBy`\n\n---\n\n### 📚 **Looking for multiple elements?**  \nUse:\n\n- `getAllBy`, `queryAllBy`, `findAllBy`\n\n---\n\n### 📊 **When to use these queries?**\n\n| 🎯 **Goal of the test**                          | ✔️ **Use**                |\n| ------------------------------------------------ | ------------------------ |\n| Prove that an element exists                    | `getBy`, `getAllBy`       |\n| Prove that an element **does not** exist         | `queryBy`, `queryAllBy`   |\n| Ensure an element eventually exists             | `findBy`, `findAllBy`     |\n\n---\n\n### 🔎 **Querying for elements with different criteria**  \nReact Testing Library provides many query functions. Each begins with names like **getBy**, **findBy**, etc., and the suffixes indicate the criteria used to find the element.\n\n| Suffix of Function Name  | **Search Criteria**                                             |\n| ------------------------ | --------------------------------------------------------------- |\n| **ByRole**               | Finds elements based on their **implicit** or **explicit** ARIA role. |\n| **ByLabelText**          | Finds form elements based on the **text** in their associated label. |\n| **ByPlaceholderText**    | Finds form elements based on their **placeholder text**.        |\n| **ByText**               | Finds elements based on the **text** they contain.              |\n| **ByDisplayValue**       | Finds elements based on their **current value**.                |\n| **ByAllText**            | Finds elements based on their **alt** attribute.                |\n| **ByTitle**              | Finds elements based on their **title** attribute.              |\n| **ByTestId**             | Finds elements based on their **data-testid** attribute.        |\n\n---\n\n✨ **Final Tip:** Don't worry about having the **perfect query** every time. The key is to **write clear and functional tests** to ensure the application behaves as expected. 🙌\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedyane%2Fjest-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedyane%2Fjest-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedyane%2Fjest-guide/lists"}