Your First Test

Welcome to this free course covering the basics of Jest and Vitest.

If you already know the fundamentals and only want to learn how to test React components, jump straight to the next course which focuses on React testing.

This first course is test-runner-agnostic - it makes no difference whether you use Jest or Vitest.

As this is the first lesson, let's get used to the interface here on HowToTestFrontend.com.

Each lesson on HowToTestFrontend.com has two main parts to it.

  • the lesson content (which you are reading here),
  • and the Code Editor/Test Runner.
On mobile, you can access it via the tab at the top.

How the code editor/test runner works

We run your test code directly in your browser and then report the results back.

If your test renders a React component (for example, with a render() call), then you can preview the DOM after the test has run.

You will see this in almost every lesson, except in this first course, which focuses on the fundamentals of testing with Jest or Vitest.

Every lesson starts with some example code.

The idea is that you take this example code (which will often be incomplete), and you take what you learned from the lesson and make the test pass.

Hint: Press the arrow button above the code editor to run the code and see if the tests pass!

If you are stuck:

  • there are normally hints (see the lightbulb icon).
  • if really need it you can click the menu button to "Show answer".

Note: You should not edit the imports at the top of the file.

Lesson Task

As this is the first lesson, the sample code (use the tabs above) is set up to pass.

Click the run button, wait for the 'tests ran successfully' message, then mark the lesson as 'done' and continue to the next lesson.

Ready to try running tests for this lesson?