Set up and configure Jest testing framework for JavaScript/TypeScript projects with proper Babel/TypeScript integration, test writing, and ESLint configuration.
Set up and configure the Jest testing framework for JavaScript and TypeScript projects, including proper configuration, test writing patterns, and integration with Babel, TypeScript, and ESLint.
This skill guides you through installing and configuring Jest for modern JavaScript/TypeScript projects. It covers basic setup, writing tests, configuring Babel/TypeScript integration, and setting up proper ESLint rules for test files.
Install Jest as a development dependency using the project's package manager:
```bash
npm install --save-dev jest
```
Add test script to `package.json`:
```json
{
"scripts": {
"test": "jest"
}
}
```
Run the Jest configuration wizard to create `jest.config.js`:
```bash
npm init jest@latest
```
Answer the prompts based on project requirements (TypeScript support, test environment, coverage, etc.).
**If the project uses TypeScript, choose ONE approach:**
#### Option A: Via Babel (Recommended for existing Babel projects)
1. Install Babel dependencies:
```bash
npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript
```
2. Create or update `babel.config.js`:
```javascript
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
],
};
```
3. **Note:** Babel transpilation does NOT perform type-checking. Consider running `tsc --noEmit` separately for type validation.
#### Option B: Via ts-jest (For type-checking during tests)
1. Install ts-jest:
```bash
npm install --save-dev ts-jest
```
2. Configure Jest to use ts-jest transformer (typically done via config wizard or manually in `jest.config.js`):
```javascript
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
```
**Choose ONE approach for Jest global types:**
#### Option A: Import from @jest/globals (Explicit imports)
1. Install:
```bash
npm install --save-dev @jest/globals
```
2. Import in test files:
```typescript
import { describe, expect, test } from '@jest/globals';
import { sum } from './sum';
describe('sum module', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});
```
#### Option B: Use @types/jest (Ambient globals)
1. Install:
```bash
npm install --save-dev @types/jest
```
2. Match version closely to installed Jest version (e.g., Jest 30.0.x → @types/[email protected]).
3. No imports needed in test files; globals are available automatically.
**If the project uses ESLint**, configure Jest globals to avoid `no-undef` errors:
#### Option A: Using Flat Config (ESLint 9+)
```javascript
import { defineConfig } from 'eslint/config';
import globals from 'globals';
export default defineConfig([
{
files: ['**/*.test.js', '**/*.test.ts', '**/__tests__/**/*'],
languageOptions: {
globals: {
...globals.jest,
},
},
},
]);
```
#### Option B: Using eslint-plugin-jest (Legacy or Flat Config)
1. Install:
```bash
npm install --save-dev eslint-plugin-jest
```
2. Configure (legacy `.eslintrc.json`):
```json
{
"overrides": [
{
"files": ["tests/**/*", "**/*.test.js", "**/*.test.ts"],
"plugins": ["jest"],
"env": {
"jest/globals": true
}
}
]
}
```
Create a simple function and test:
**sum.js:**
```javascript
function sum(a, b) {
return a + b;
}
module.exports = sum;
```
**sum.test.js:**
```javascript
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
```
Run tests:
```bash
npm test
```
Expected output:
```
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
```
Jest supports various CLI options for flexible test execution:
```bash
jest my-test
jest --config=jest.config.json
jest --notify
jest --watch
jest --coverage
```
Refer to Jest CLI documentation for full options: https://jestjs.io/docs/cli
**Example 1: Basic JavaScript project**
```
User: "Set up Jest for my JavaScript project"
Agent:
1. Installs jest via npm
2. Adds "test": "jest" to package.json
3. Runs npm init jest@latest for config
4. Creates sample sum.js and sum.test.js
5. Runs npm test to verify
```
**Example 2: TypeScript project with type-checking**
```
User: "I need Jest with TypeScript and type-checking during tests"
Agent:
1. Installs jest and ts-jest
2. Configures jest.config.js with preset: 'ts-jest'
3. Installs @jest/globals for explicit imports
4. Creates sample TypeScript test with imports
5. Configures ESLint for Jest globals
6. Runs npm test to verify
```
**Example 3: Existing Babel project adding tests**
```
User: "Add Jest to my existing Babel project"
Agent:
1. Installs jest, babel-jest (auto-detected)
2. Verifies babel.config.js targets node: 'current'
3. Adds test script to package.json
4. Creates example test file
5. Runs tests to confirm Babel transformation works
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/jest-testing-framework-setup/raw