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

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

Jest preset used by Merchant Center customizations.

Install

$ npm install --save @commercetools-frontend/jest-preset-mc-app

Usage

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

Custom config

You can pass a custom config using one of the cosmiconfig format options. The config module name to use is jest-preset-mc-app. For example:

.jest-preset-mc-apprc
.jest-preset-mc-apprc.json
.jest-preset-mc-apprc.yaml
.jest-preset-mc-apprc.yml
.jest-preset-mc-apprc.js
jest-preset-mc-app.config.js

Supported options are:

• silenceConsoleWarnings: a list of strings or RegEx to match against console logs. If the value matches, the log will be suppressed. This option only takes effect when the environment variable CI is defined.
• notThrowWarnings: a list of strings or RegEx to match against console logs. If the value matches, no error will be thrown. This option only takes effect when the environment variable CI is defined.

TypeScript support

If you need 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:

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

Opt-in Enzyme support

This Jest preset does not ship with Enzyme support anymore (version >=20).

In case you still use Enzyme in your tests, you need to do a bit of extra configuration as described below:

Enzyme 16

• 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

• 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:

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

• 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

NOTE that the @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.

• 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:

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.