Installing Jest
Installing Jest starts with adding it as a dev dependency: npm install --save-dev jest (or yarn add --dev jest, pnpm add -D jest). Once installed, add a test script to package.json — "scripts": { "test": "jest" } — so npm test invokes the Jest CLI. For TypeScript projects, you additionally install ts-jest and @types/jest, or configure Babel with babel-jest and @babel/preset-env so Jest can transform .ts files before running them.
Cricket analogy: Installing Jest as a dev dependency is like a franchise signing a specialist bowling coach only for the training squad, not the match-day XI — npm install --save-dev keeps Jest out of your production bundle just as the coach never takes the field.
The jest.config.js File
Jest can be configured either via a jest.config.js (or .ts/.mjs) file, or a "jest" key inside package.json. Common options include testEnvironment ("node" for backend code or "jsdom" for browser-like DOM APIs needed by frontend components), testMatch or testRegex to customize which files are treated as tests, collectCoverage and coverageThreshold to enforce minimum test coverage percentages, and setupFilesAfterEnv to run global setup code such as importing @testing-library/jest-dom matchers before every test file.
Cricket analogy: Choosing testEnvironment: 'jsdom' versus 'node' is like a curator deciding whether tomorrow's pitch at Eden Gardens will be prepared for spin or pace — jsdom sets up a browser-like DOM pitch for frontend tests while node keeps it a plain server-side surface.
Configuring for TypeScript and Babel
For TypeScript projects, the two common paths are ts-jest, which type-checks and compiles .ts files using your project's tsconfig.json at test time, or babel-jest with @babel/preset-typescript, which strips types without type-checking (faster, but you rely on a separate tsc --noEmit step for type errors). Which you choose affects the transform option in jest.config.js, which maps file patterns like ^.+\.tsx?$ to the appropriate transformer.
Cricket analogy: Choosing ts-jest over Babel's type-stripping is like a team using DRS with full ball-tracking review versus a quick on-field umpire call — ts-jest does the thorough type-check (like a full review) while Babel just strips types fast (a quick call) and skips deeper verification.
// jest.config.js
module.exports = {
testEnvironment: 'jsdom',
testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
collectCoverage: true,
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};You can run npx jest --init to generate a starter jest.config.js interactively — it asks about your test environment, coverage preferences, and whether to clear mocks between tests, then scaffolds the file for you.
Common Configuration Pitfalls
A frequent stumbling block is moduleNameMapper, needed when your app uses path aliases (like @components/Button via a tsconfig.json paths entry) or imports non-JS assets like CSS and images — without a matching moduleNameMapper entry, Jest throws Cannot find module errors even though the app builds fine with webpack or Vite. Another common issue is forgetting that ESM-only packages in node_modules may need to be added to transformIgnorePatterns since Jest, by default, doesn't transform anything inside node_modules.
Cricket analogy: Forgetting moduleNameMapper for a path alias is like a scorer's system not recognizing a player's nickname used on the team sheet — the official database (Jest) throws an error because it doesn't know 'Bumrah' maps to 'Jasprit Bumrah' the way your bundler does.
By default, Jest does NOT transform files inside node_modules, assuming they're already valid CommonJS. If a dependency ships only ES Modules, you'll see a SyntaxError: Cannot use import statement outside a module — fix it by adding that package to transformIgnorePatterns with a negative lookahead, e.g. transformIgnorePatterns: ['node_modules/(?!(some-esm-package)/)'].
- Install Jest with npm install --save-dev jest and add "test": "jest" to package.json scripts.
- Configure Jest via jest.config.js or a "jest" key in package.json.
- Set testEnvironment to jsdom for frontend/DOM-based tests or node for backend tests.
- Use ts-jest for type-checked TypeScript compilation, or Babel with @babel/preset-typescript for faster type-stripping.
- moduleNameMapper resolves path aliases and non-JS imports like CSS/images so Jest doesn't throw Cannot find module.
- transformIgnorePatterns controls which node_modules packages Jest is allowed to transform — needed for ESM-only dependencies.
- Run npx jest --init to interactively scaffold a starter configuration file.
Practice what you learned
1. Which command adds Jest as a development dependency?
2. Which testEnvironment value gives your tests access to DOM APIs like document and window?
3. What problem does moduleNameMapper typically solve?
4. Why might a test fail with SyntaxError: Cannot use import statement outside a module?
5. What does npx jest --init do?
Was this page helpful?
You May Also Like
What Is Jest?
An introduction to Jest, the all-in-one JavaScript testing framework built by Meta for unit, integration, and snapshot testing.
Writing Your First Test
A hands-on walkthrough of writing, running, and understanding your first Jest test file.
Running and Watching Tests
How to run Jest from the command line, use watch mode for fast feedback, and interpret coverage output.