Jest/Vitest Testing Fundamentals | How To Test Frontend

Jest/Vitest Testing Fundamentals Course<br>Learn the basics of how to test with Jest or Vitest. This course covers the main features for writing assertions, tests, mocks, async testing, and more

This is preparation for learning how to test React frontend applications. In this course we cover the core Jest and Vitest fundamentals that you need to know before you start testing frontend applications.

This includes common ways to write tests in Jest and Vitest, common matchers, working with mocks, async behaviour, and more.

Once you have completed this course, you will be ready for the main content on this site covering React frontend testing.

Note: This entire course is free (does not even require sign up) and it can be useful even if you want to learn Backend/NodeJS testing .

It is compatible with both Jest and Vitest , as they share very similar syntax for most things.

19 lessons<br>Interactive test runner in browser

Course Lessons<br>19 lessons to learn everything about Jest/Vitest Testing Fundamentals

Getting Started

FREE

Your First Test<br>Write a simple test that asserts that 2 + 2 equals 4, to understand the basic test structure<br>Start

Completed

Start

FREE

Execute test code with test() and it()<br>Intro to the main functions test() and it() where you will put your test code<br>Start

Completed

Start

FREE

Organise your tests with describe() blocks<br>How to organise your test by putting related tests and assertions within their own describe() block<br>Start

Completed

Start

Common Matchers

FREE

Common Matchers<br>Learn matchers like toBe(), toEqual(), toBeTruthy(), and toBeNull() and how to use them in your tests<br>Start

Completed

Start

FREE

Testing Numbers<br>How to assert on numbers using matchers like toBeGreaterThan(), and handle floating-point comparisons<br>Start

Completed

Start

FREE

Testing Strings<br>How to write tests that do comparisons and assertions on strings, in Jest and Vitest<br>Start

Completed

Start

FREE

Testing Arrays<br>Using matchers like toHaveLength() to match array sizes, or making assertions on the items within an array<br>Start

Completed

Start

FREE

Testing Objects<br>Use matchers such as toContain() and toMatchObject() to verify complex data structures<br>Start

Completed

Start

FREE

Testing with Negation (.not)<br>Learn how to use .not to test the opposite of what you expect, using matchers like .not.toBe() and .not.toEqual()<br>Start

Completed

Start

Basic Testing Concepts

10<br>FREE

Testing Exceptions and Errors<br>How to use the toThrow() matcher to test that your code handles errors correctly<br>Start

Completed

Start

11<br>FREE

Async Testing with Promises<br>Test asynchronous code using async/await and resolves/rejects matchers<br>Start

Completed

Start

12<br>FREE

Fake timers and fake system time<br>Learn how to use timer mocks (jest.useFakeTimers or vi.useFakeTimers) to test time-dependent code with setTimeout, setInterval, and other timer functions without waiting for real time to pass<br>Start

Completed

Start

13<br>FREE

Snapshots and Inline Snapshots<br>How to use snapshots and inline snapshots in your Jest and Vitest tests<br>Start

Completed

Start

Test File Structure

14<br>FREE

Setup and Teardown with beforeEach/afterEach<br>How to run code before all or each test, and after each or all tests. This can be used to set things up (or clean up after) in your tests<br>Start

Completed

Start

15<br>FREE

Using each() to loop over test data<br>Use each() to run the same test with different test data<br>Start

Completed

Start

16<br>FREE

Skip, Todo, and Only<br>Learn to use .skip(), .todo(), and .only() to control which tests run<br>Start

Completed

Start

Spies and Mocks

17<br>FREE

Mocking imports and dependencies with mock()<br>Use jest.mock() or vi.mock() to mock entire modules, file imports, or external dependencies in your tests<br>Start

Completed

Start

18<br>FREE

Function Mocking (jest.fn/vi.fn)<br>Create mock functions and track when they are called<br>Start

Completed

Start

19<br>FREE

Spying on Functions with jest.spyOn()<br>Use jest.spyOn() to monitor calls to existing functions without replacing their implementation<br>Start

Completed

Start