This code snippet configures Jest for testing a Next.js app. It sets up custom configurations such as module aliases, test environment, coverage settings, and file extensions. It also exports the Jest configuration. This code creates a new Jest config object with custom settings, including setup options and coverage directories. It also includes…

Configure Jest for Next.js with TypeScript and custom settings.md

Configure Jest for Next.js with TypeScript and custom settings

Preview:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],

  testEnvironment: 'jest-environment-jsdom',

  /**
   * Absolute imports and Module Path Aliases
   */
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/public/$1',
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
    '^.+\\.(svg)$': '<rootDir>/src/__tests__/__mocks__/svg.tsx',
  },

  testPathIgnorePatterns: [
    '<rootDir>/.next/',
    '<rootDir>/node_modules/',
    '<rootDir>/out/',
  ],

  coverageDirectory: '<rootDir>/coverage',
  coverageReporters: ['text', 'lcov', 'cobertura'],
  coverageThreshold: {
    global: {
      lines: 70,
    },
  },

  collectCoverageFrom: [
    'src/**/*.js',
    'src/**/*.jsx',
    'src/**/*.tsx',
    'src/**/*.ts',
    '!src/**/*.stories.js',
    '!src/**/*.stories.jsx',
    '!src/**/*.stories.tsx',
    '!src/**/*.test.js',
    '!src/**/*.test.jsx',
    '!src/**/*.test.tsx',
    '!src/**/__tests__/',
  ],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.tsx?$': 'babel-jest',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.jest.json',
    },
  },
  verbose: true,
  testMatch: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

Associated Context
Type	Code Snippet ( .js )
Associated Tags	webpack create-react-app coverage Directory emotion Source Directory jest.config.js customJestConfig Test Environment Jest Configuration TypeScript nextJest Module Files GitHub: paxer-ecomm Coverage Reporters Test Match JSX Compiler babeljs Module Path Aliases next.js Line Counting Test Path Ignore Patterns Node Modules Transform createJestConfig Jest setup reactjs Framework: Next.js
💡 Smart Description	This code snippet configures Jest for testing a Next.js app. It sets up custom configurations such as module aliases, test environment, coverage settings, and file extensions. It also exports the Jest configuration. This code creates a new Jest config object with custom settings, including setup options and coverage directories. It also includes files to be used in the next.js app or test environment for testing purposes.
🔎 Suggested Searches	nextJest require createJestConfig custom config moduleNameMapper absolute imports testPathIgnorePatterns coverage exports createJestConfig js js and env files in next Jest environment tsx coverage directory for TypeScript config file with custom configuration options collectCoverageFrom
Related Links	https://github.com/Prinhotels/paxer-ecomm/blob/4ea43d58a34b9a2edfccdd5497d1b0df16398490/jest.config.js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://github.com/Prinhotels/paxer-ecomm/commits https://reactjs.org/ https://github.com/Prinhotels/paxer-ecomm https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array https://www.npmjs.com/package/react-chartjs-2 https://www.npmjs.com/package/react-scripts
Related People	No Related People
Sensitive Information	No Sensitive Information Detected
Shareable Link	https://80bf283b-6009-4f42-846a-4710759dc199.pieces.cloud/?p=99844bbf41