Published

If you are trying to use Jest in your Vite-React-TypeScript app for the very first time it could get a little bit tricky. Luckly with the help of some people on the web we can piece together a straightforward solution.

Follow these steps for a quick and painless setup.

Installing the dependencies

There’s a couple of packages that will be needed for Jest to work properly.

For TypeScript support add these packages:

terminal
npm i -D ts-jest @types/jest ts-node

For Jest & Testing Library, add these packages:

terminal
npm i -D jest @testing-library/react @testing-library/user-event @testing-library/jest-dom jest-environment-jsdom
npm i -D identity-obj-proxy jest-svg-transformer

Configuring our project

We’ll need to configure Jest. Add a jest.config.ts file with the following content:

jest.config.ts
export default {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^.+\\.svg$': 'jest-svg-transformer',
    '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
  },
}

To conclude, inside your package.json add a test script calling jest.

package.json
{
  "test": "jest"
}

Adding a simple test

Add a test file with test.tsx as extension.

tests/a-simple-test.tsx
test('a simple test', () => {
  expect(1).toBe(1)
})

Running our test(s)

Simply run npm test.

Resources