Unit Frontend Component Tests

🛠️ Testing Frameworks and Tools

• Framework Details:

  • Just is the testing framework used

  • Babel is used It is used in this project to transform modern JavaScript and TypeScript code for testing purposes

• Version Information:

  • Jest: 29.7.0

  • Babel: Core version 7.22.20 with specific presets and plugins for React and TypeScript.

🧰 Setup and Configuration

Installation Instructions

• Prerequisites

  • Node.js installed on your machine.

  • npm (Node Package Manager) available.

• Install Project Dependencies

  • Navigate to the root directory of the project.

  • Run the following command to install all project dependencies, including those required for testing:

    npm install

• Install Jest and Babel Dependencies

  npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

Jest Configuration

Configuration file: jest.config.js

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[tj]sx?$': ['babel-jest', { configFile: './babel.config.jest.js' }],
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
    '^public/(.*)$': '<rootDir>/__mocks__/fileMock.js', // Added this line
  },
  transformIgnorePatterns: [
    '/node_modules/(?!(jwt-decode|js-cookie|react-icons)/)',
  ],
  // ... any other configurations
};

• Preset and Environment

  • ts-jest: This preset is used to enable Jest to work seamlessly with TypeScript. It allows you to write tests in TypeScript and ensures that TypeScript code is properly compiled before testing.

  • jsdom: This test environment simulates a browser-like environment for testing purposes. It is particularly useful for testing React components and other code that interacts with the DOM.

• Transformations

  • Babel is used to transform JavaScript and TypeScript code before running tests. The babel-jest package is specified in the transform configuration to handle files with .ts, .tsx, .js, and .jsx extensions. This ensures that modern JavaScript and TypeScript syntax is compatible with the test environment.

• Setup Files

  • The setupFilesAfterEnv option specifies files that should be executed after the test environment is set up but before the tests are run. In this configuration, <rootDir>/jest.setup.js is used to configure the testing environment, such as setting up global variables or configuring testing libraries.

• Module Name Mapper

  • This configuration maps module paths and asset files to specific mock implementations. For example:

    • ^@/(.*)$ maps to <rootDir>/$1, allowing for simplified import paths.

    • \\.(css|less|scss|sass)$ maps to identity-obj-proxy, which mocks style imports.

    • Image and asset files (e.g., .jpg, .png, .svg) are mapped to <rootDir>/__mocks__/fileMock.js, providing a mock implementation for these files during tests.

• Transform Ignore Patterns

  • The transformIgnorePatterns option specifies patterns for files that should not be transformed by Babel. In this configuration, the /node_modules/ directory is ignored, except for specific packages like jwt-decode, js-cookie, and react-icons, which are explicitly included for transformation. This ensures that these packages are compatible with the test environment.

These configurations help tailor Jest to work effectively with the project's TypeScript and React code, ensuring a smooth testing process.

Babel Configuration

Configuration file: babel.config.jest.js

// babel.config.jest.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: { node: 'current' },
        // Include this option to transform async/await
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/plugin-syntax-top-level-await',
    //'@babel/plugin-transform-react-display-name',
  ],
};

📒 Test Organization and Structure

• Directory Structure: root/tests/name.test.tsx or .ts

🗒️ Writing Unit Tests

Test Structure:

The ultimate goal is to gradually migrate from javascript to Typescript the whole project frontend codebase. Thus tests are written in Typescript, so that tests can also benefit from type-safety when anything changes in other files.

• Test Naming Conventions: Provide guidelines on how to name test files and test cases.

• Common Test Patterns: Explain common patterns used in your tests, such as setup and teardown, mocking, and assertions.

🏃‍♀️ Running Tests

• Command Line Instructions: Provide commands to run tests in different environments (e.g., development, staging, production).

• Continuous Integration: Describe how tests are integrated into the CI/CD pipeline, if applicable.