Configuring test environment - mark-lumbao/react-ts-boilerplate GitHub Wiki

Setting up your Test Environment with Jest and React Testing Library

  1. Things to install:

    npm i -D jest @testing-library/react @types/jest babel-jest react-test-renderer ts-jest jest-transform-stub

  2. Configure jest

    // jest.config.js

module.exports = {
  clearMocks: true,
  coverageDirectory: 'coverage',
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  globals: {
    window: {},
  },
  moduleDirectories: [
    'node_modules',
    '<rootDir>/src',
  ],
  testPathIgnorePatterns: [
    '<rootDir>/public',
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'jest-transform-stub',
  },
};

  3. Enable jest in your .eslintrc.js 

    env: {
  browser: true,
  es2021: true,
+ jest: true,
},

  4. Finally Add your test command in package.json 

    "scripts": {
  "build": "cross-env TS_NODE_PROJECT=\"webpack-tsconfig.json\" webpack --mode production",
  "start:dev": "cross-env TS_NODE_PROJECT=\"webpack-tsconfig.json\" webpack serve --hot --progress --mode development",
+ "test": "jest --verbose --colors"
},
⚠️ **GitHub.com Fallback** ⚠️