Skip to content

Angular Jest Unit Testing Configuration and Helper Functions for Writing Effective Test Cases

Notifications You must be signed in to change notification settings

PradeepKumarBose/ng-jest-config

Repository files navigation

Here's a sample README.md for your Angular Jest unit testing setup, including configurations, helper functions, and guidelines for writing effective test cases.


Angular Jest Unit Testing Setup

This repository provides an Angular testing setup using Jest for unit testing. It includes configuration files, helper functions, and best practices for writing effective, maintainable test cases for Angular applications.

Table of Contents

  1. Installation
  2. Configuration
  3. Helper Functions
  4. Writing Effective Test Cases
  5. Running Tests
  6. Troubleshooting

Installation

  1. Clone the repository:

    git clone <repository-url>
    cd <repository-name>
  2. Install dependencies:

    npm install

Configuration

This project is configured to use Jest as the testing framework for Angular. Below is a brief overview of the configuration files and settings.

  • jest.config.js: The Jest configuration file defines how Jest will work with Angular and TypeScript.
  • tsconfig.spec.json: TypeScript configuration for Jest unit tests.
  • jest.setup.ts: Sets up global mocks and helper functions for testing.

Jest Configuration (jest.config.ts)

import type { Config } from 'jest';

const config: Config = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  coverageReporters: ["json", "text", "lcov", "clover", "cobertura"],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
    "./src/components/Event-component/event-component/event-component.component.ts": {
      branches: 70,
      functions: 70,
      lines: 70,
      statements: 70,
    },
  },
  moduleNameMapper: {
    "^@constants$": "<rootDir>/src/constants"
  },
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/jest/setup-jest.ts'],
  testEnvironment: "jsdom",
};

export default config;
};

TypeScript Test Configuration (tsconfig.spec.json)

Ensure the TypeScript configuration for Jest testing is correctly set up with Jest types and helpers:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest", "node"
    ],
    "typeRoots": ["node_modules/@types", "jest/types"],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*.spec.ts",
  ],
  "files": ["jest/types/global.d.ts"]
}

Helper Functions

The helper functions in jest/helper.ts provide utility methods for testing. These functions help mock, spy, and reset mock states to simplify test cases and maintain consistency.

Available Helpers

  • mockFunction: Mock a method on an object.
  • spyOnFunction: Spy on a method on an object.
  • expectCalled: Check if a mock was called.
  • expectCalledTimes: Verify the number of calls on a mock.
  • expectCalledWith: Check if a mock was called with specific arguments.
  • resetMocks: Reset all mocks globally.

Example usage:

test('should call the mock function', () => {
  const obj = { myMethod: () => {} };
  const mock = JestHelper.mockFunction(obj, 'myMethod');

  obj.myMethod();
  JestHelper.expectCalled(mock);
});

Writing Effective Test Cases

  1. Use Descriptive Test Names: Clearly describe what each test is verifying.
  2. Isolate Units of Code: Test each function or component in isolation to avoid dependencies on external factors.
  3. Utilize Helper Functions: Use JestHelper functions to simplify and standardize mocks, spies, and assertions.
  4. Reset State Between Tests: Use JestHelper.resetMocks() in beforeEach or afterEach to maintain isolation between test cases.

Running Tests

Run the following command to execute the tests:

npm test

For detailed output, use:

npm test -- --verbose

Troubleshooting

  • Type Errors in Jest: Verify jest.config.js and tsconfig.spec.json are correctly configured.
  • Configuration Not Loaded: Clear Jest cache if tests do not reflect recent changes:
    jest --clearCache

Let me know if there’s any other content you'd like to add!

About

Angular Jest Unit Testing Configuration and Helper Functions for Writing Effective Test Cases

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published