Learn the concept
Test Runner Setup & Configuration
Set up Jest by installing it, creating jest.config.js with settings like testEnvironment, transform for TypeScript/Babel, setupFilesAfterEnv for test utilities, and coverage configuration. Integrate with React Testing Library for component tests.
Jest Setup:
Key Configuration:
With React:
// jest.config.js
module.exports = {
// Test environment
testEnvironment: 'jsdom',
// Setup files
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
// Transform TypeScript/JSX
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
},
// Module aliases (match tsconfig paths)
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'\\.(css|less|scss)$': 'identity-obj-proxy',
},
// Coverage
collectCoverageFrom: [
'src/**/*.{js,jsx,ts,tsx}',
'!src/**/*.d.ts',
'!src/index.tsx',
],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
},
},
// Test patterns
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
testPathIgnorePatterns: ['/node_modules/', '/dist/'],
};
Configuring Jest with `testEnvironment: 'jsdom'`, `babel-jest` for JSX/ESNext syntax, and integrating `@testing-library/react` and `@testing-library/jest-dom` for user-centric component assertions.
Adding `ts-jest` to Jest's `transform` configuration and setting up a `tsconfig.json` specifically for test files, allowing developers to write new tests in TypeScript while the main project remains JavaScript.
Configuring Jest's `collectCoverageFrom` and `coverageThreshold` in `jest.config.js` to ensure that all new code is adequately tested and that coverage metrics meet predefined quality gates before merges.
Initialize a new React project, install Jest and React Testing Library, and configure `jest.config.js` to correctly run component tests in a JSDOM environment.
Set up a Node.js project to use TypeScript. Configure Jest to transpile and run TypeScript test files using `ts-jest`, ensuring type-checking is integrated into the testing workflow.
Airbnb has significantly contributed to the JavaScript testing landscape, using Jest extensively across their frontend and backend. Their `jest.config.js` files are highly tuned for monorepo setups, optimized for React component testing with `@testing-library/react`, and integrated with robust CI systems.
Jest, being developed by Facebook, is the primary testing framework used internally for React development. Their testing setups are designed for scalability, performance, and developer experience, leveraging Jest's advanced configuration options for large-scale applications.