Documentation

Jest preset

Elevate, May 20-22-2025, Miami Beach, Florida

Streamline the testing of customizations using Jest.

Installation

Install the @commercetools-frontend/jest-preset-mc-app package:

yarn add @commercetools-frontend/jest-preset-mc-app

Additionally, install the peer dependency (if not present):

yarn add jest

Usage

To configure Jest for your customization, include the preset in your Jest configuration file:

jest.test.config.jsJavascript
module.exports = {
  preset: '@commercetools-frontend/jest-preset-mc-app',
};
package.jsonjson
"scripts": {
  "test": "jest --config jest.test.config.js"
},

TypeScript support

To use the Jest preset with additional TypeScript support, you need to point to the @commercetools-frontend/jest-preset-mc-app/typescript preset in your Jest config:

For example:

jest.test.config.jsJavascript
module.exports = {
  preset: '@commercetools-frontend/jest-preset-mc-app/typescript',
};

Opt-in Enzyme support

The preset no longer ships with Enzyme support by default (version >=20).

If you still use Enzyme in your tests, you need to do a bit of extra configuration:

Enzyme 16

  1. Install the necessary dependencies:

    yarn add \
  @commercetools/enzyme-extensions \
  @commercetools/jest-enzyme-matchers \
  enzyme \
  enzyme-adapter-react-16 \
  enzyme-matchers \
  enzyme-to-json \
  jest-enzyme

  2. In your Jest config, instead of importing the preset @commercetools-frontend/jest-preset-mc-app you need to use the helper function @commercetools-frontend/jest-preset-mc-app/enzyme/apply-jest-preset-with-enzyme.js to merge one of the main presets with the opt-in Enzyme setup.

    For example:

    jest.test.config.jsJavascript
    const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
const applyJestPresetWithEnzyme = require('@commercetools-frontend/jest-preset-mc-app/enzyme/apply-jest-preset-with-enzyme');

module.exports = {
  ...applyJestPresetWithEnzyme({
    enzymeAdapterVersion: 16,
    jestPreset,
  }),
};

    Similarly, you can use the @commercetools-frontend/jest-preset-mc-app/typescript instead of the @commercetools-frontend/jest-preset-mc-app.

Enzyme 17

  1. Install the necessary dependencies:

    yarn add \
  @commercetools/enzyme-extensions \
  @commercetools/jest-enzyme-matchers \
  @wojtekmaj/enzyme-adapter-react-17 \
  enzyme \
  enzyme-matchers \
  enzyme-to-json \
  jest-enzyme

    @wojtekmaj/enzyme-adapter-react-17 is not the official supported package by Enzyme. Follow the progress on this PR to know when the official adapter is going to be released.

  2. In your Jest config, instead of importing the preset @commercetools-frontend/jest-preset-mc-app you need to use the helper function @commercetools-frontend/jest-preset-mc-app/enzyme/apply-jest-preset-with-enzyme.js to merge one of the main presets with the opt-in Enzyme setup.

    For example:

    jest.test.config.jsJavascript
    const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
const applyJestPresetWithEnzyme = require('@commercetools-frontend/jest-preset-mc-app/enzyme/apply-jest-preset-with-enzyme');

module.exports = {
  ...applyJestPresetWithEnzyme({
    enzymeAdapterVersion: 17,
    jestPreset,
  }),
};

    Similarly, you can use the @commercetools-frontend/jest-preset-mc-app/typescript instead of the @commercetools-frontend/jest-preset-mc-app.