DEV Community

Cover image for Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide.

Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide.

Hannah Ejimofor on July 08, 2023

Introduction Application testing is an important aspect of web development. It helps eliminate bugs before these applications are pushed...
Read full post
Collapse
 
uwemisrael profile image
Uwem •

This worked perfectly for me. If you have typescript path alias, you'll need to adjust your jest.config.js

My tsConfig fie

{
"baseUrl": ".",
    "paths": {
      "@app/*": ["src/*"]
    }
}
Enter fullscreen mode Exit fullscreen mode

jest.config.js

export default {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    // process `*.tsx` files with `ts-jest`
  },
  rootDir: 'src',
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__ mocks __/fileMock.js',
    '^@app/(.*)$': '<rootDir>/$1',
  },
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yuripaz profile image
Yuri da Paz Simonin •

unfortunately this feature is not working

Collapse
 
hannahadora profile image
Hannah Ejimofor •

Sorry about that .. Have you found a way to get it working?

Collapse
 
thraizz profile image
Aron Schüler •

Now if I only could get the transform for import { ReactComponent as MySvg } from "./MySvg.svg"; to work 🥲

Collapse
 
jukkahuuskonen profile image
Jukka Huuskonen •

are you already using:
import MySvg from './MysSvg.svg?react;

or just wishing to get the old way to work?

Collapse
 
thraizz profile image
Aron Schüler •

Wishing the old way to work.
But I can do that with the plugin vite-plugin-svgr, just register it as a plugin and you're good to go 😺

Collapse
 
urielbitton profile image
Uriel Bitton •

you're a genius. This was such a nightmare when moving from CRA to Vite. thanks!

Collapse
 
hannahadora profile image
Hannah Ejimofor •

Thank you 😊

Collapse
 
iamfranco profile image
Franco Chan •

Amazing guide, thank you so much!! I'll probably come back here whenever I start a new vite jest project 😅

Collapse
 
hannahadora profile image
Hannah Ejimofor •

✅😄

Collapse
 
septalfauzan profile image
Septa Alfauzan •

Thank, it help me a lot

Collapse
 
hannahadora profile image
Hannah Ejimofor •

I appreciate 😀

Collapse
 
ochukodotspace profile image
Ochuko •

Thank you for this. It wasn't so straight forward for me, I had some dependency conflicts I had to figure out, but this article ultimately saved the day.

Collapse
 
hannahadora profile image
Hannah Ejimofor •

Thank you

So happy to hear that

Collapse
 
shmbajaj profile image
shubhambajaj •

Inside jest.config.ts, the property rootDir is not configured to "src"
which causes the error: "Could not load module, resolver: undefined".

To resolve the error either set the rootDir or adjust path to have "src" inside it.

[1] Set rootDir to "src"

jest.config.ts

{
rootDir: "src",
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
  },
}
Enter fullscreen mode Exit fullscreen mode

[2] Adjust path to have "src" inside it

jest.config.ts

{
...,
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/src/test/__mocks__/fileMock.js',
  },
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
aliplutus profile image
aliplutus •

did u solve that yest

Collapse
 
shmbajaj profile image
shubhambajaj •

Yes @aliplutus

Collapse
 
brunocampos profile image
Bruno Campos •

Thanks, Hanna! I was getting crazy looking for a solution like this.

Collapse
 
hannahadora profile image
Hannah Ejimofor •

Thank you
I'm glad it helped

Collapse
 
ferchomuri profile image
Fernando Murillo •

Hi everyone,

I'm new to Vite and Jest but I have some problems with SVG and CSS, and I fixed them with this code:

jest.config.ts

export default {
preset: "ts-jest”,
testEnvironment: "jest-environment-jsdom”,
transform: {
“^.+\\.tsx?$”: "ts-jest”,
},
rootDir: "src”,
moduleNameMapper: {
“\\.(gif|ttf|eot|svg|png)$”: “<rootDir>/test/__ mocks __/fileMock.js”,
“^@app/(.*)$”: “<rootDir>/$1”,
"\\.(css)$": "identity-obj-proxy",
},
}

Collapse
 
aliplutus profile image
aliplutus • • Edited

SyntaxError: Cannot use import statement outside a module

github.com/aliscie/odoc/tree/unit-...

Image description

Collapse
 
pkatheti profile image
pradeep katheti •

PASS src/test/App.spec.tsx
FAIL src/test/App.test.tsx
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Enter fullscreen mode Exit fullscreen mode

this error even setup all thing

Collapse
 
sameerkali profile image
Sameer Faridi •

its working for me, thanks alot

Collapse
 
hhourani27 profile image
Habib •

Thank you for this tutorial. On small difference, I installed jest-environment-jsdom as a dev dependency (is there a reason not to?)

npm install jest-environment-jsdom --save-dev

Collapse
 
mohsincode profile image
Mohsin • • Edited

Is it recommended to use Jest for a Vite project for unit and integration testing? Or is it better to go with another testing tool?

Collapse
 
johnw profile image
John Witt •

How would this install process differ without using TypeScript? I have been learning to code the past nine months and I have not reviewed TypeScript yet. What's the best way to proceed?