Jest and React Testing Library

Jest Introduction

Matchers

Setup and teardown

Further readings:

• Jest Official Guide
• jest-dom

React Testing Library Introduction

Rendering Component

Queries

• getBy
• queryBy
• findBy
• getAllBy
• queryAllBy
• findAllBy

getBy vs queryBy

User Action

userEvent is preferrable.

User Action

Testing Async Component

Further readings:

• Official React Testing Library Guide
• Common Mistakes with React Testing Library
• Testing playground

Testing Accessibility

Make your website accessible

Only ~30% of accessibility issues can be found by automated testing

Testing accessibility

• Testing HTML validity
• Navigate using a keyboard
• Navigate using a screen reader

Further readings:

• Web Accessibility Course by Google
• Testing Web Accessibility

Mocking HTTP Requests and Modules

Mocking ES modules

Jest Mock Functions

Mocking HTTP request

Example

Further readings:

• Stop mocking fetch

Testing Custom Hooks

React hooks can only be called inside a function component. To test a custom hook, one way is to create an example component, and test that component instead.

Example

React Hooks Testing Library

When to use this library?

Examples

• useToggle
• useDebounce

Further readings:

• How to test custom React hooks