React Testing Library Demo

This repo is for medium articles which explain how to use React Testing Library with TypeScript !

• The Practical Guide to Start React Testing Library with TypeScript.
• Snapshots of Material-UI styled component with React Testing Library and TypeScript.

Overview

This repo has several branches for each articles.

1. master
   • is starting point for The Practical Guide to Start React Testing Library with TypeScript.
2. feature/01_MUI_styled_component_test
   • is ending point for The Practical Guide to Start React Testing Library with TypeScript.
   • is starting point for Snapshots of Material-UI styled component with React Testing Library and TypeScript.

Demo Application

The application is called My Pokemon . To explain various topics of React Testing Library, the application itself is not super simple.

It has three main features.

Features

1. Check Pokedex
   • you can see pokemons as a list
   • /pokemons
     
     
     
     
2. Check pokemon detail information
   • /pokemons/:id
     
     
     
     
3. Add and remove a pokemon into your list
   • you can add and remove in pokemon detail page (/pokemons/:id)
   • check your pokemons (/my_pokemons)
     
     
     
     

Setup

If you want to learn React Testing Library, I recommend to write actual code.

1. Clone this repo

git clone https://github.com/egurinko/react-testing-library-demo.git

2. Install all dependencies

cd react-testing-library-demo
yarn

3. Start local server

yarn start

How it works

• React
• Material-UI
• Redux
• react-router
• React Testing Library
• JEST
• TypeScript
• others (webpack, babel, eslint, prettier, PokéAPI)