I'll show you how easy it is to get started with React Router 7, Vite 6, and Vitest 2.

But first, do you know what’s common in React Router, Remix, and Vite?

They are all key building blocks of modern React applications.

React Router has been around for ages. If you’re one of the OG React fans, this was one of the first libraries you started using together with React whenever you wanted to ship something.

Vite debuted in April 2020 as a long-awaited alternative to the most popular (and almost only) solution that worked reliably at that time - Webpack.

The newest technology is Remix. In 2022, Shopify acquired the team working on it, but they kept the development open-source. 👏 Remix presented itself as an alternative to Next.js, which currently dominates the React framework market. Starting with React Router 7, Remix became part of React Router, so you don’t have to install it separately from this version.

If I had to visualize React Router, Vite, and Remix, I’d go with some incredibly talented ninja foxes who have many years of experience and have the power and tools (open source) to disrupt a market that Webpack, Next.js, and Jest have so far owned.

Let’s set up React Router 7 with Vite 6 and Vitest 2 and write a simple test using React Testing Library.

Install React Router

To create a new project using React Router, run this command inside your terminal npx create-react-router@latest react-router-with-vitest.

Once this is done, run npm run dev, and open http://localhost:5173/ to make sure that the installation worked.

create-react-router sets you up with Vite by default.

Install Vitest and React Testing Library

To write some simple tests for the React components generated by create-react-router, we’ll need React Testing Library and JSDom. Here’s the command that installs the necessary dependencies:

npm install -D vitest @testing-library/jest-dom @testing-library/react @testing-library/user-event jsdom

Configure Vitest

React Router already created a Vite configuration file for us, so let's modify it to use Vitest.

Disable React Router

React Router doesn't work in Vitest's environment, so we'll disable it when we run Vitest. Luckily, Vitest sets the process.env.VITEST when running, so it's easy to turn off the plugin conditionally.

Inside vite.config.ts make the following change:

/// <reference types="vitest" /> 

// imports...

export default defineConfig({
  ...
  plugins: [!process.env.VITEST && reactRouter(), tsconfigPaths()],
  ...
});

Import Jest Matchers

To be able to use jest matchers in our tests, such as .toBeInTheDocument(), we'll create a new file ./test/setup.ts containing only this import:

// ./test/setup.ts
import '@testing-library/jest-dom';

Now go back to vite.config.ts and add the rest of the Vitest configuration:

test: {
  globals: true,
  setupFiles: './test/setup.ts',
  environment: 'jsdom',
},

The flag globals: true allows using global test functions like describe and it without importing them, and jsdom is the browser-like environment where our React component will render so we can test them.

Test Command in package.json

As a little shortcut, I add this to my scripts section in package.json:

{
  "name": "react-router-with-vitest",
  "private": true,
  "type": "module",
  "scripts": {
  ...
    "test": "vitest"
  },
  ...
}

So I can run the tests by typing npm test instead of npx vitest.

Create a Test

Let's create a simple test file welcome.test.tsx next to welcome.tsx:

import { Welcome } from './welcome';
import { render, screen } from '@testing-library/react';

describe('Welcome', () => {
  test('renders', () => {
    render(<Welcome />);

    expect(screen.getByText('React Router Docs')).toBeInTheDocument();
  })
})

Then from your terminal, run npm test:

$ npm test

> test
> vitest


 DEV  v2.1.8 /Users/akoskm/Projects/react-router-with-vitest

 ✓ app/welcome/welcome.test.tsx (1)
   ✓ Welcome (1)
     ✓ renders

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  08:10:30
   Duration  439ms (transform 28ms, setup 37ms, collect 53ms, tests 19ms, environment 162ms, prepare 34ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Congratulations!

You just set up React Router 7, Vite 6, Vitest 2, and React Testing Library!

Troubleshooting

Reference Error

ReferenceError: expect is not defined

You forgot to turn on globals: true inside test in vite.config.ts.

Can't detect preamble

Error: React Router Vite plugin can't detect preamble. Something is wrong.

Similar to Remix, React Router was not designed to work with Vitest. Remove the React Router plugin from your Vite configuration file to fix this.

You can either create a new configuration file vite.config.test.ts where you don't include react-router:

plugins: [tsconfigPaths()],

and run vitest with the --config vite.config.test.ts flag, or use process.env.VITEST to turn off the plugin when Vitest is running:

plugins: [!process.env.VITEST && remix()],

The same approach is being used in the official Remix docs.

GitHub Repository

https://github.com/akoskm/react-router-with-vitest

React Router Vitest Example