Jest preset for customizations
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:
module.exports = {preset: '@commercetools-frontend/jest-preset-mc-app',};
"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:
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
Install the necessary dependencies:
yarn add \@commercetools/enzyme-extensions \@commercetools/jest-enzyme-matchers \enzyme \enzyme-adapter-react-16 \enzyme-matchers \enzyme-to-json \jest-enzymeIn 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.jsJavaScriptconst 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-enzymePlease note that
@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:
jest.test.config.jsJavaScriptconst 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
.