React + TypeScript + Vitest

Testing & Code Quality with Vitest and Github-actions

• React + TypeScript + Vitest
  • Introduction
  • Unit Testing
    • Testing Philosophy
    • Getting Warmed Up: The Basics of Unit Testing
    • Great Expectations
    • Parallelizing, Parameterizing, and Reporting
  • Building a CI Pipeline with Github Actions
  • Component Testing
    • Testing for Accessibility
    • Testing for Code Coverage
  • Storing Artifacts Using Github Actions
  • Mocking and Spying
  • Integration Testing with Playwright
  • Enforcing Standards
  • Sources

Introduction

• Introduction
• Components of Large Application

Unit Testing

Testing Philosophy

When it comes to testing, a lot of the terminology is murky and things don't always mean what they originally mean. Let's settle on a common vocabulary. We'll also talk about some of the trade-offs between different kinds of tests.

• Unit, Integration, and End-to-End Testing
• Test Runners and Assertion Libraries

Getting Warmed Up: The Basics of Unit Testing

Okay, we're not going to dwell too much on the basics of unit testing, but let's at least do a quick review of the basics to get ourselves warmed up and make sure we're on the same page. If you're a little rusty, then this section will get you up to speed. That said, I suspect that even the seasoned unit testing wunderkind, I suspect you'll still pick up a trick or two.

• Running Your Tests with Vitest
• Why Tests Pass and Fail
• Filtering Tests
• Test Suites and Annotations
• Testing Asynchronous Code

Great Expectations

This course doesn't seek to be the canonical curriculum on testing. Instead, all of our discussions on testing are going to be from the perspective that your primary job is to write software and if your tests are brittle or hard to maintain, you're going to stop testing.

If the section that follows was a Buzzfeed blog post, it's title would be "Top Ten Tricks to Stop Hating Your Unit Tests."

• Beyond Strict Equality
• Asymmetric Matchers and a Real World Use Case for Asymmetric Matching
• Exercise: Testing a Reducer Exercise and a Solution

Parallelizing, Parameterizing, and Reporting

• Test Context
• Parameterizing Tests
• Parallelizing Tests

Building a CI Pipeline with Github Actions

We know that if a test doesn't fail then it technically passes. What about if you never run your tests? Join me for this and other deep philosophical questions. In this section, we'll begin building out some of our automated testing pipeline (a.k.a. continuous integration) using Github Actions.

• Getting Started with Github Actions
• Adding a Step to Your Github Action
• Caching Assets Between Jobs
• Caching Dependencies
• Setting Up Branch Protections
• Exercise: Setting Up Prettier with Github Actions and a Solution
• Bonus: Running Github Actions Locally

Component Testing

Testing functions is all well and good, but what about mounting entire components? This can be a great way to get some confidence in your UI implementation without needing to figure out how to get a full browser-driven integration suite up and running. In this section, we'll get starting with Testing Library, which is a mostly framework-agnostic tool for rendering UI to a fake DOM and giving you the ability to interact with it just like a real user would.

• Testing the Accident Counter
• Extending Matchers for Testing Library
• Globally Extending Matchers in the Test Setup for Component Testing
• Setting the Environment in Vitest
• Interacting with the DOM Using Testing Library
• Basic Component Testing Exercise and Solution
• Creating a Helper for Rendering Components and User Events
• Exercise: Packing List Component Testing and Solution
• Bonus Exercise: Obstacle Course
• Working with Contexts and Redux and Exercise

Testing for Accessibility

• Hooking Up aXe with Testing Library

Testing for Code Coverage

• Code Coverage

Storing Artifacts Using Github Actions

• Generating Artifacts Using Github Actions
• Exercise: Generating an Artifact for Your Code Coverage Report and a Solution

Mocking and Spying

• Mocks
• Spies
• Faking Time
• Clearing, Restoring, and Reseting Mocks and Spies
• Mocking Imports and Modules
• A Word on Dependency Injection
• Mocking Globals
• Mocking Environment Variables
• Mocking APIs

Integration Testing with Playwright

• Getting Set Up with Playwright
• Writing Some Simple Playwright Tests
• Exercise: Input Obstacles
• Configuring Playwright
• Recording with Playwright
• Exercise: Store an Artifact for Your Playwright Tests
• Experiment: Get computed style for a DOM node
• Mocking Routes in Playwright
• Recording Network Requests with Playwright

Enforcing Standards

• Configuring Prettier
• Configuring and Running ESLint
• Custom Rules for ESLint
• Exercise: Set Up a Job for Checking Lint and Prettier Rules
• Husky, Lint-Staged, and Git Hooks
• Creating a Reusable Github Action

Sources

The examples used into project fork from the project Enterprise UI Development.