[Breaking] Drop Enzyme support from Jest preset and make it opt-in

.changeset/good-wolves-watch.md

@@ -0,0 +1,6 @@
+---
+'merchant-center-application-template-starter': patch
+'@commercetools-frontend/sdk': patch
+---
+
+Remove `enzyme` from tests and dependencies.

.changeset/serious-actors-attend.md

@@ -0,0 +1,65 @@
+---
+'@commercetools-frontend/jest-preset-mc-app': major
+---
+
+We [strongly recommend and believe](https://docs.commercetools.com/custom-applications/development/testing) to use React Testing Library for testing your Custom Application and therefore we are finally dropping support for `Enzyme`.
+
+You can still use Enzyme as an opt-in preset following the instructions below:
+
+### 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 import `@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-16.js`
+
+For example:
+
+```js
+const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
+const jestPresetForEnzyme16 = require('@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-16');
+
+module.exports = {
+  ...jestPreset,
+  ...jestPresetForEnzyme16,
+};
+```
+
+### 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
+```
+
+2. In your Jest config, instead of importing the preset `@commercetools-frontend/jest-preset-mc-app` you need to import `@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-17.js`
+
+For example:
+
+```js
+const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
+const jestPresetForEnzyme17 = require('@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-17');
+
+module.exports = {
+  ...jestPreset,
+  ...jestPresetForEnzyme17,
+};
+```

@types-extensions/jest.d.ts

@@ -1,12 +1,5 @@
 declare namespace jest {
   interface Matchers<R, T> {
     toHaveTextContent(selector: string): R;
-    // The following matchers are part of https://www.npmjs.com/package/@commercetools/jest-enzyme-matchers
-    toHaveProp(selector: string, expected?: unknown): R;
-    toRender(selector: string): R;
-    toRender(component: React.ComponentType): R;
-    toHaveState(selector: string, expected: unknown): R;
-    // The following matchers are part of https://www.npmjs.com/package/jest-dom
-    toHaveText(selector: string): R;
   }
 }

application-templates/starter/package.json

@@ -43,7 +43,6 @@
     "@manypkg/cli": "0.17.0",
     "@testing-library/react": "11.2.6",
     "dotenv-cli": "4.0.0",
-    "enzyme": "3.11.0",
     "jest": "26.6.3"
   }
 }

package.json

@@ -140,7 +140,6 @@
     "cross-env": "7.0.3",
     "cypress": "7.1.0",
     "dotenv": "8.2.0",
-    "enzyme": "3.11.0",
     "eslint": "7.25.0",
     "eslint-formatter-pretty": "4.0.0",
     "eslint-plugin-graphql": "4.0.0",

packages/jest-preset-mc-app/README.md

@@ -30,3 +30,87 @@ 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 import `@commercetools-frontend/jest-preset-mc-app/jest-preset-for-typescript.js` in your Jest config.
+
+For example:
+
+```js
+const jestPresetForTypeScript = require('@commercetools-frontend/jest-preset-mc-app/jest-preset-for-typescript');
+
+module.exports = {
+  ...jestPresetForTypeScript,
+};
+```
+
+## 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
+
+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 import `@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-16.js`
+
+For example:
+
+```js
+const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
+const jestPresetForEnzyme16 = require('@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-16');
+
+module.exports = {
+  preset: {
+    ...jestPreset,
+    ...jestPresetForEnzyme16,
+  },
+};
+```
+
+### 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
+```
+
+> NOTE that the `@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 import `@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-17.js`
+
+For example:
+
+```js
+const jestPreset = require('@commercetools-frontend/jest-preset-mc-app');
+const jestPresetForEnzyme17 = require('@commercetools-frontend/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-17');
+
+module.exports = {
+  preset: {
+    ...jestPreset,
+    ...jestPresetForEnzyme17,
+  },
+};
+```

packages/jest-preset-mc-app/enzyme/base-setup-test-framework-for-enzyme.js

@@ -0,0 +1,17 @@
+require('jest-enzyme');
+
+const ShallowWrapper = require('enzyme/ShallowWrapper');
+const configureEnzymeExtensions = require('@commercetools/enzyme-extensions');
+const commerceToolsEnzymeMatchers = require('@commercetools/jest-enzyme-matchers');
+
+expect.extend({
+  toBeComponentWithName(received, actual) {
+    const pass = received && received.displayName === actual;
+    const message = () =>
+      `expected ${received} ${pass ? 'not ' : ''} to be ${actual}`;
+    return { message, pass };
+  },
+});
+
+expect.extend(commerceToolsEnzymeMatchers);
+configureEnzymeExtensions(ShallowWrapper);

packages/jest-preset-mc-app/enzyme/create-jest-preset-for-enzyme.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const defaultPreset = require('../jest-preset');
+
+const resolveRelativePath = (relativePath) =>
+  path.resolve(__dirname, relativePath);
+
+const createJestPresetForEnzyme = (version) => ({
+  ...defaultPreset,
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: [
+    resolveRelativePath('../setup-test-framework.js'),
+    resolveRelativePath(`./setup-test-framework-for-enzyme-${version}.js`),
+  ],
+});
+
+module.exports = createJestPresetForEnzyme;

packages/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-16.js

@@ -0,0 +1,3 @@
+const createJestPresetForEnzyme = require('./create-jest-preset-for-enzyme');
+
+module.exports = createJestPresetForEnzyme(17);

packages/jest-preset-mc-app/enzyme/jest-preset-for-enzyme-17.js

@@ -0,0 +1,3 @@
+const createJestPresetForEnzyme = require('./create-jest-preset-for-enzyme');
+
+module.exports = createJestPresetForEnzyme(16);

packages/jest-preset-mc-app/enzyme/setup-test-framework-for-enzyme-16.js

@@ -0,0 +1,5 @@
+require('./base-setup-test-framework-for-enzyme');
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter(), disableLifecycleMethods: true });

packages/jest-preset-mc-app/enzyme/setup-test-framework-for-enzyme-17.js

@@ -0,0 +1,5 @@
+require('./base-setup-test-framework-for-enzyme');
+const Enzyme = require('enzyme');
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+
+Enzyme.configure({ adapter: new Adapter(), disableLifecycleMethods: true });

packages/jest-preset-mc-app/jest-preset.js

@@ -27,7 +27,6 @@ module.exports = {
     'jest-localstorage-mock',
   ],
   setupFilesAfterEnv: [resolveRelativePath('./setup-test-framework.js')],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   testEnvironment: 'jsdom',
   testURL: 'https://mc.europe-west1.gcp.commercetools.com/',
   testPathIgnorePatterns: ['node_modules', 'cypress'],

packages/jest-preset-mc-app/package.json

@@ -20,37 +20,24 @@
   "module": "./jest-preset.js",
   "dependencies": {
     "@commercetools-frontend/babel-preset-mc-app": "19.3.1",
-    "@commercetools/enzyme-extensions": "5.0.0",
-    "@commercetools/jest-enzyme-matchers": "1.1.2",
     "@sheerun/mutationobserver-shim": "0.3.3",
     "@testing-library/jest-dom": "5.12.0",
     "babel-jest": "26.6.3",
     "colors": "1.4.0",
     "cosmiconfig": "7.0.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-matchers": "7.1.2",
-    "enzyme-to-json": "3.6.2",
     "identity-obj-proxy": "3.0.0",
     "intl": "1.2.5",
-    "jest-enzyme": "7.1.2",
     "jest-localstorage-mock": "2.4.10",
     "jest-silent-reporter": "0.5.0",
     "jest-transform-graphql": "2.1.0",
     "jest-watch-typeahead": "0.6.3",
     "make-plural": "6.2.2",
-    "pkg-dir": "5.0.0",
     "raf": "3.4.1",
     "ts-jest": "26.5.5",
     "unfetch": "4.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "11.2.6",
-    "enzyme": "3.11.0",
     "jest": "26.6.3"
-  },
-  "peerDependencies": {
-    "@testing-library/react": "11.x",
-    "enzyme": "3.x",
-    "jest": "26.x"
   }
 }

packages/jest-preset-mc-app/setup-test-framework.js

@@ -1,35 +1,10 @@
 require('unfetch/polyfill');
-require('jest-enzyme');
 require('@testing-library/jest-dom/extend-expect');
 require('./polyfills/intl');
 
-const Enzyme = require('enzyme');
-const DefaultEnzymeAdapter = require('enzyme-adapter-react-16');
-const ShallowWrapper = require('enzyme/ShallowWrapper');
 const { configure: configureRtl } = require('@testing-library/react');
-const configureEnzymeExtensions = require('@commercetools/enzyme-extensions');
-const commerceToolsEnzymeMatchers = require('@commercetools/jest-enzyme-matchers');
 const loadConfig = require('./load-config');
 
 const jestConfig = loadConfig();
 
-Enzyme.configure({
-  adapter: jestConfig.EnzymeAdapter
-    ? jestConfig.EnzymeAdapter
-    : new DefaultEnzymeAdapter(),
-  disableLifecycleMethods: true,
-});
-
 configureRtl(jestConfig.rtlConfig);
-
-expect.extend({
-  toBeComponentWithName(received, actual) {
-    const pass = received && received.displayName === actual;
-    const message = () =>
-      `expected ${received} ${pass ? 'not ' : ''} to be ${actual}`;
-    return { message, pass };
-  },
-});
-
-expect.extend(commerceToolsEnzymeMatchers);
-configureEnzymeExtensions(ShallowWrapper);

packages/jest-preset-mc-app/setup-tests.js

@@ -1,8 +1,5 @@
-const fs = require('fs');
 const { Headers } = require('node-fetch');
-const path = require('path');
 const colors = require('colors/safe');
-const pkgDir = require('pkg-dir');
 const MutationObserver = require('@sheerun/mutationobserver-shim');
 const loadConfig = require('./load-config');
 

packages/sdk/package.json

@@ -44,7 +44,7 @@
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@types/enzyme": "3.10.8",
+    "@testing-library/react": "11.2.6",
     "@types/uuid": "8.3.0",
     "react": "17.0.2",
     "react-redux": "7.2.4",