Testing

next-forge uses Vitest for unit testing. It’s a fast and lightweight testing framework that’s compatible with Jest’s API. Unit tests are run automatically as part of the build task in Turborepo.

​

Running Tests

To run tests, simply execute:

pnpm test

This will run all tests in the __tests__ folder in each app, however we’ve only written a couple of tests for app project so far.

​

Adding Tests

We use Testing Library for our tests. It’s a great library that allows you to test your components in a way that’s close to how a user would interact with them.

In the __tests__ folder, create a new file called [page].test.tsx (where [page] is the name of the page you want to test). Here’s an example of a test for the home page:

import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import Page from '../app/(unauthenticated)/home/page';

test('Home Page', () => {
  render(<Page />);
  expect(
    screen.getByRole('heading', {
      level: 1,
      name: 'Hello, world!',
    })
  ).toBeDefined();
});

​

Adding Vitest to other apps

To add Vitest to another app, you’ll need to install the dependencies:

pnpm install -D vitest @testing-library/react @testing-library/dom --filter [app]

as well as adding the @repo/testing package to the devDependencies section of the package.json file:

"devDependencies": {
  "@repo/testing": "workspace:*"
}

Create a new file called vitest.config.ts in the root of the app and add the following:

export { default } from '@repo/testing';

Then, create a new file in the __tests__ folder in the relevant app and add a test command to the package.json file:

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

Turborepo will automatically pick up on the new test script and run the tests.

Then, just follow the instructions above to write tests.