Skip to main content

6. Tests

Let's start with mobx-example project.

Preparing workspace

To start working on this project you have two option: development using local or online editor:

  1. Online Editor
  2. Local development
    • Clone repo from mobx-example and set branch to create-tests. You can use this command:
    git clone --branch create-tests
    • Open vs code for this project, if you still in terminal you can use this command:
    code mobx-example
    • Install dependencies:
    npm install
    • Run dev server:
    npm dev

Install tools for testing

pnpm add vitest happy-dom
  • vitest - tools that allow write and run out test
  • happy-dom - emulates browser environment by providing Browser API


We can add config to vite.config.ts or create dedicate file for test environment config. In this case we use shared config:

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
plugins: [react()],
build: {
sourcemap: true,
test: {
environment: "happy-dom",

Write tests

import { describe, test, expect } from "vitest";
import { CounterStore } from "./Store";

describe("CounterStore", () => {
test("new counter", () => {
const counter = new CounterStore();

Run test

pnpm vitest

or if you using npm you need to add to package.json

"scripts": {
"test": "vitest"

npm run test


Please test this scenario for CounterStore:

  • test adding valid/invalid input
  • test reset

And also for Store:

  • test creation of Store
  • test adding/deleting counters (check limitation)


pnpm add @vitest/coverage-c8
"scripts": {
"test-coverage": "pnpm vitest run --coverage",

End-to-end testing

If we wanna test in the way user use application we can use playwright