# Jest preset

Streamline the testing of customizations using Jest.

### Installation

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

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

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

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

```yarn
yarn add jest
```

```npm
npm --save install jest 
```

### Usage

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

```js title="jest.test.config.js"
module.exports = {
  preset: '@commercetools-frontend/jest-preset-mc-app',
};
```

```json title="package.json"
"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:

```js title="jest.test.config.js"
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
   yarn add 
     @commercetools/enzyme-extensions 
     @commercetools/jest-enzyme-matchers 
     enzyme 
     enzyme-adapter-react-16 
     enzyme-matchers 
     enzyme-to-json 
     jest-enzyme
   ```

   ```npm
   npm --save install 
     @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:

   ```js title="jest.test.config.js"
   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
   yarn add 
     @commercetools/enzyme-extensions 
     @commercetools/jest-enzyme-matchers 
     @wojtekmaj/enzyme-adapter-react-17 
     enzyme 
     enzyme-matchers 
     enzyme-to-json 
     jest-enzyme
   ```

   ```npm
   npm --save install 
     @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](https://github.com/enzymejs/enzyme/pull/2430) 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:

   ```js title="jest.test.config.js"
   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`.

## Related pages

- [Area overview page with navigation](/merchant-center-customizations.md)
- [Previous page: Cypress](/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-cypress.md)
- [Next page: Permissions](/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-permissions.md)