Jest/Vitest Testing Fundamentals Course
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.
Course Lessons
19 lessons to learn everything about Jest/Vitest Testing Fundamentals
Getting Started
Your First Test
Write a simple test that asserts that 2 + 2 equals 4, to understand the basic test structure
Execute test code with test() and it()
Intro to the main functions test() and it() where you will put your test code
Organise your tests with describe() blocks
How to organise your test by putting related tests and assertions within their own describe() block
Common Matchers
Common Matchers
Learn matchers like toBe(), toEqual(), toBeTruthy(), and toBeNull() and how to use them in your tests
Testing Numbers
How to assert on numbers using matchers like toBeGreaterThan(), and handle floating-point comparisons
Testing Strings
How to write tests that do comparisons and assertions on strings, in Jest and Vitest
Testing Arrays
Using matchers like toHaveLength() to match array sizes, or making assertions on the items within an array
Testing Objects
Use matchers such as toContain() and toMatchObject() to verify complex data structures
Testing with Negation (.not)
Learn how to use .not to test the opposite of what you expect, using matchers like .not.toBe() and .not.toEqual()
Basic Testing Concepts
Testing Exceptions and Errors
How to use the toThrow() matcher to test that your code handles errors correctly
Async Testing with Promises
Test asynchronous code using async/await and resolves/rejects matchers
Fake timers and fake system time
Learn how to use timer mocks (jest.useFakeTimers/vi.useFakeTimers) to test time-dependent code with setTimeout, setInterval, and other timer functions without waiting for real time to pass
Snapshots and Inline Snapshots
How to use snapshots and inline snapshots in your Jest and Vitest tests
Test File Structure
Setup and Teardown with beforeEach/afterEach
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
Using each() to loop over test data
Use each() to run the same test with different test data
Skip, Todo, and Only
Learn to use .skip(), .todo(), and .only() to control which tests run
Spies and Mocks
Mocking imports and dependencies with mock()
Use jest.mock() or vi.mock() to mock entire modules, file imports, or external dependencies in your tests
Function Mocking (jest.fn/vi.fn)
Create mock functions and track when they are called
Spying on Functions with jest.spyOn()
Use jest.spyOn() to monitor calls to existing functions without replacing their implementation