Skip to content

Latest commit

 

History

History
105 lines (73 loc) · 6.04 KB

react-testing-jest-and-RTL.md

File metadata and controls

105 lines (73 loc) · 6.04 KB

Testing React Components with Jest and React Testing Library

Projected Time

~ 2.5 hours

Prerequisites

Here are links to lessons that should be completed before this lesson:

Motivation

Learn a commonly used React testing tool.

Jest is designed to test JS and React code. React Testing Library (RTL) is a great tool to use with Jest to test that your component is rendering and behaving as expected from the perspective of the user, as opposed to the perspective of the developer. The idea is that the most critical things that you don't want to break are the experience of the end user - for example, do you want a test for a button to fail when its internal function name changes or gets refactored? It's probably more important that the component renders at all, that it renders with the right styles, and it behaves correctly when clicked.

Which companies use Jest + RTL testing?

Objectives

Participants will be able to:

  • Create a testing structure with Jest + RTL
  • Create assertion functions
  • Generate, display and watch tests
  • Become familiar with Jest snapshot testing

Specific Things to Learn

  • write test assertions using Jest + RTL
  • recognize when to use RTL
  • the basic difference between unit and integration testing

Materials

Note: How to use these links is described in the Lesson section.

Lesson

React Testing Library

  1. Read these 2 "React Testing Library: Getting Started" pages. (5 min) - https://testing-library.com/docs/ - https://testing-library.com/docs/guiding-principles

  2. Work through this freeCodeCamp tutorial (~30 min): React Testing Library – Tutorial with JavaScript Code Examples

  3. Follow along with this video series by The Net Ninja (~ 90 min. Each one is 5-15 min. Feel free to take a break at some point between videos.): - RTL Tutorial #1 - Introduction (start at 2:00) - RTL Tutorial #2 - The Importance of Testing - RTL Tutorial #3 - Types of Test - RTL Tutorial #4 - Structure of Tests - RTL Tutorial #5 - Intro to Query Methods - RTL Tutorial #6 - Priority - RTL Tutorial #7 - Using Query Methods - RTL Tutorial #8 - Assertions - RTL Tutorial #9 - Describe Block - RTL Tutorial #10 - Fire Events - RTL Tutorial #11 - Integration Tests

You'll be using previous methods a lot, while these next ones are likely necessary only a couple times per application.
- [RTL Tutorial #12 - Finding Async Elements with FindBy](https://youtu.be/V2wWLM8VX5k)
- [RTL Tutorial #13 - Mocking Requests](https://youtu.be/TBZy-Rc-xX0) - You should not be testing outside apps. Apps should be testing themselves, and this includes your own backend. You don't want to be testing things you have not control over.
- [RTL Tutorial #14 - Before & After Each](https://youtu.be/MtiQMhzjQrY)

Jest Snapshots

Follow just these 2 sections about snapshot testing. Use inside any of your practice apps from this outline or the Jest outline (10 min):

Read this, but no need to try it now. This may come in handy later. (2 min): https://kentcdodds.com/blog/effective-snapshot-testing#snapshot-diff

When should I use Jest snapshots?

  • Most of the time you want to test CSS in your component.
  • To test the overall structure of your component, and how major variations differ. For example, if you have a component that can switch between a light and a dark theme, you probably want 1 snapshot per theme.
  • Breakpoint differences! For example, when mobile layout is different then desktop layout, you should have 2 snapshots.

When should I not use Jest snapshots?

Check for Understanding

Make sure you can answer these questions. If you aren't sure about any of these, write them down and figure it out with a peer before moving on.

- What is the difference between **unit** testing and **integration** testing?
- If you're hoping to prove that an element is *not*, rendering, such as when you want a section not to be in the document after a button click, which of these query methods should you use and why?:  `getByText`, `findByText`, `queryByText`
- When should you use RTL? When should you just use Jest only?
- When is a Jest snapshot test helpful?