From 0cdfe97ab97c06c1b141d187e97cbe2dc1b63e9d Mon Sep 17 00:00:00 2001
From: Filip Satek <filip.satek@firma.seznam.cz>
Date: Wed, 28 Aug 2024 17:08:34 +0200
Subject: [PATCH] test: migrate to IMA Testing Library

---
 .gitignore                                    |   1 +
 jest.config.itl.js                            |  20 ++
 .../jestSetup.js => jestSetup.itl.js          |   0
 package.json                                  |   3 -
 packages/plugin-atoms/jest.config.js          |  19 +-
 .../__tests__/__snapshots__/mountSpec.js.snap |   5 -
 .../plugin-atoms/src/__tests__/mountSpec.js   | 107 ------
 .../src/components/__tests__/IframeSpec.jsx   |  38 +++
 .../__snapshots__/IframeSpec.jsx.snap         |  25 ++
 packages/plugin-select/jest.config.js         |   9 +-
 packages/plugin-select/jestSetupFile.js       |  11 -
 .../src/select/__tests__/SelectSpec.js        | 197 ++++++-----
 .../__snapshots__/SelectSpec.js.snap          | 322 +++++++-----------
 .../EnzymePageRenderer.js                     |   2 +
 14 files changed, 312 insertions(+), 447 deletions(-)
 create mode 100644 jest.config.itl.js
 rename packages/plugin-atoms/jestSetup.js => jestSetup.itl.js (100%)
 delete mode 100644 packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap
 delete mode 100644 packages/plugin-atoms/src/__tests__/mountSpec.js
 create mode 100644 packages/plugin-atoms/src/components/__tests__/IframeSpec.jsx
 create mode 100644 packages/plugin-atoms/src/components/__tests__/__snapshots__/IframeSpec.jsx.snap
 delete mode 100644 packages/plugin-select/jestSetupFile.js

diff --git a/.gitignore b/.gitignore
index 56ffb98f..15adfe11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,5 @@
 .eslintcache
 *.tgz
 **/.turbo
+.swc/
 !itl.tgz
diff --git a/jest.config.itl.js b/jest.config.itl.js
new file mode 100644
index 00000000..306261f0
--- /dev/null
+++ b/jest.config.itl.js
@@ -0,0 +1,20 @@
+const {
+  setImaTestingLibraryServerConfig,
+  FALLBACK_APP_MAIN_PATH,
+  FALLBACK_APPLICATION_FOLDER,
+} = require('@ima/testing-library/server');
+
+const base = require('./jest.config.base.js');
+
+setImaTestingLibraryServerConfig({
+  applicationFolder: FALLBACK_APPLICATION_FOLDER,
+});
+
+module.exports = {
+  ...base,
+  preset: '@ima/testing-library',
+  moduleNameMapper: {
+    'app/main': FALLBACK_APP_MAIN_PATH,
+  },
+  setupFiles: ['<rootDir>/../../jestSetup.itl.js'],
+};
diff --git a/packages/plugin-atoms/jestSetup.js b/jestSetup.itl.js
similarity index 100%
rename from packages/plugin-atoms/jestSetup.js
rename to jestSetup.itl.js
diff --git a/package.json b/package.json
index 57c3f18d..e97374e7 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.8",
     "@babel/preset-react": "^7.22.3",
-    "@cfaester/enzyme-adapter-react-18": "^0.7.0",
     "@changesets/cli": "^2.26.1",
     "@ima/plugin-cli": "^19.1.2",
     "@ima/testing-library": "itl.tgz",
@@ -46,8 +45,6 @@
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
-    "enzyme": "3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
diff --git a/packages/plugin-atoms/jest.config.js b/packages/plugin-atoms/jest.config.js
index 834a51b2..3dd3a9d3 100644
--- a/packages/plugin-atoms/jest.config.js
+++ b/packages/plugin-atoms/jest.config.js
@@ -1,20 +1,5 @@
-const {
-  setImaTestingLibraryServerConfig,
-  FALLBACK_APP_MAIN_PATH,
-  FALLBACK_APPLICATION_FOLDER,
-} = require('@ima/testing-library/server');
-
-const base = require('../../jest.config.base.js');
-
-setImaTestingLibraryServerConfig({
-  applicationFolder: FALLBACK_APPLICATION_FOLDER,
-});
+const itl = require('../../jest.config.itl.js');
 
 module.exports = {
-  ...base,
-  preset: '@ima/testing-library',
-  moduleNameMapper: {
-    'app/main': FALLBACK_APP_MAIN_PATH,
-  },
-  setupFiles: ['./jestSetup.js'],
+  ...itl,
 };
diff --git a/packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap b/packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap
deleted file mode 100644
index 92892587..00000000
--- a/packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UIAtoms mount rendering should render atoms without noscript tag:  should render Iframe without noscript tag 1`] = `"<div class="atm-iframe atm-overflow" style="width: auto; height: auto;"><iframe src="example.html" name="example.html" class="atm-fill"></iframe></div>"`;
-
-exports[`UIAtoms mount rendering should render atoms without noscript tag:  should render Image without noscript tag 1`] = `"<img src="example.jpg" loading="lazy" decoding="async" class="atm-image">"`;
diff --git a/packages/plugin-atoms/src/__tests__/mountSpec.js b/packages/plugin-atoms/src/__tests__/mountSpec.js
deleted file mode 100644
index 556cd841..00000000
--- a/packages/plugin-atoms/src/__tests__/mountSpec.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { PageContext } from '@ima/react-page-renderer';
-import classnames from 'classnames';
-import { mount } from 'enzyme';
-import { Infinite } from 'infinite-circle';
-import { JSDOM } from 'jsdom';
-// eslint-disable-next-line no-unused-vars
-import { useState } from 'react';
-import { toMockedInstance } from 'to-mock';
-
-import _router from './mocks/router';
-import _settings from './mocks/settings';
-import _window from './mocks/window';
-import ComponentPositions from '../ComponentPositions';
-import * as UIAtoms from '../main';
-import UIComponentHelper from '../UIComponentHelper';
-// eslint-disable-next-line import/order
-import Visibility from '../Visibility';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useState: () => [true, () => {}],
-}));
-
-const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
-const { window } = jsdom;
-
-global.window = window;
-global.document = window.document;
-global.navigator = {
-  userAgent: 'node.js',
-};
-
-const visibility = toMockedInstance(Visibility);
-const mockPosition = {
-  height: 0,
-};
-const componentPositions = toMockedInstance(ComponentPositions, {
-  getWindowViewportRect: () => mockPosition,
-});
-const infinite = toMockedInstance(Infinite);
-
-function getComponentOptions(overrideSettings = {}) {
-  const $Settings = Object.assign({}, _settings, overrideSettings);
-
-  const $UIComponentHelper = new UIComponentHelper(
-    _router,
-    _window,
-    componentPositions,
-    visibility,
-    infinite,
-    classnames
-  );
-
-  const context = {
-    $Utils: {
-      $Settings,
-      $UIComponentHelper,
-      $CssClasses: classnames,
-    },
-  };
-  const mountOptions = {
-    context,
-    someProp: true,
-  };
-
-  return mountOptions;
-}
-
-describe('UIAtoms mount rendering', () => {
-  let wrapper = null;
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
-
-  describe('should render atoms without noscript tag: ', () => {
-    let mountOptions = getComponentOptions();
-
-    it('should render Image without noscript tag', () => {
-      const Component = UIAtoms.Image;
-      wrapper = mount(
-        <PageContext.Provider value={mountOptions.context}>
-          <Component src='example.jpg' />
-        </PageContext.Provider>,
-        mountOptions
-      );
-
-      expect(wrapper.html()).toMatchSnapshot();
-      expect(wrapper.find('noscript')).toHaveLength(0);
-    });
-
-    it('should render Iframe without noscript tag', () => {
-      const Component = UIAtoms.Iframe;
-      wrapper = mount(
-        <PageContext.Provider value={mountOptions.context}>
-          <Component src='example.html' />
-        </PageContext.Provider>,
-        mountOptions
-      );
-
-      expect(wrapper.html()).toMatchSnapshot();
-      expect(wrapper.find('noscript')).toHaveLength(0);
-    });
-  });
-});
diff --git a/packages/plugin-atoms/src/components/__tests__/IframeSpec.jsx b/packages/plugin-atoms/src/components/__tests__/IframeSpec.jsx
new file mode 100644
index 00000000..05877b44
--- /dev/null
+++ b/packages/plugin-atoms/src/components/__tests__/IframeSpec.jsx
@@ -0,0 +1,38 @@
+import { renderWithContext, waitFor } from '@ima/testing-library';
+
+import { Iframe, Visibility } from '../../main';
+
+describe('Iframe', () => {
+  it('should render with noscript tag by default', async () => {
+    const { container } = await renderWithContext(
+      <Iframe src='example.html' />
+    );
+
+    expect(container.querySelector('noscript')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render without noscript tag if visible', async () => {
+    const { app, container } = await renderWithContext(
+      <Iframe src='example.html' />
+    );
+
+    // Mock getBoundingClientRect to simulate visibility
+    container.firstChild.getBoundingClientRect = jest.fn(() => ({
+      width: 100,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 100,
+    }));
+    app.oc.get(Visibility).notify(); // Trigger visibility observer
+
+    // The component needs to re-render to remove noscript tag, there is no generic way to wait for it,
+    // so we need to wait for the noscript tag to disappear
+    await waitFor(() =>
+      expect(container.querySelector('noscript')).not.toBeInTheDocument()
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/packages/plugin-atoms/src/components/__tests__/__snapshots__/IframeSpec.jsx.snap b/packages/plugin-atoms/src/components/__tests__/__snapshots__/IframeSpec.jsx.snap
new file mode 100644
index 00000000..a3a201c6
--- /dev/null
+++ b/packages/plugin-atoms/src/components/__tests__/__snapshots__/IframeSpec.jsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Iframe should render with noscript tag by default 1`] = `
+<div
+  class="atm-iframe atm-overflow atm-placeholder"
+  style="width: auto; height: auto;"
+>
+  <noscript>
+    &lt;iframe src="example.html" name="example.html" width="auto" height="auto" class="atm-fill" &gt;&lt;/iframe&gt;
+  </noscript>
+</div>
+`;
+
+exports[`Iframe should render without noscript tag if visible 1`] = `
+<div
+  class="atm-iframe atm-overflow"
+  style="width: auto; height: auto;"
+>
+  <iframe
+    class="atm-fill"
+    name="example.html"
+    src="example.html"
+  />
+</div>
+`;
diff --git a/packages/plugin-select/jest.config.js b/packages/plugin-select/jest.config.js
index a462d40f..3dd3a9d3 100644
--- a/packages/plugin-select/jest.config.js
+++ b/packages/plugin-select/jest.config.js
@@ -1,10 +1,5 @@
-const base = require('../../jest.config.base.js');
+const itl = require('../../jest.config.itl.js');
 
 module.exports = {
-  ...base,
-  testEnvironment: 'jsdom',
-  setupFiles: ['<rootDir>/jestSetupFile.js'],
-  snapshotSerializers: [
-    '<rootDir>/../../node_modules/enzyme-to-json/serializer',
-  ],
+  ...itl,
 };
diff --git a/packages/plugin-select/jestSetupFile.js b/packages/plugin-select/jestSetupFile.js
deleted file mode 100644
index 2774402c..00000000
--- a/packages/plugin-select/jestSetupFile.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import util from 'util';
-
-var root = typeof window !== 'undefined' && window !== null ? window : global;
-
-root.TextEncoder = util.TextEncoder;
-root.TextDecoder = util.TextDecoder;
-
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import Enzyme from 'enzyme';
-
-Enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/plugin-select/src/select/__tests__/SelectSpec.js b/packages/plugin-select/src/select/__tests__/SelectSpec.js
index 3ae4f0af..22a92dc1 100644
--- a/packages/plugin-select/src/select/__tests__/SelectSpec.js
+++ b/packages/plugin-select/src/select/__tests__/SelectSpec.js
@@ -1,8 +1,8 @@
-import { PageStateManager, Dispatcher } from '@ima/core';
-import { PageContext } from '@ima/react-page-renderer';
-import { shallow, mount } from 'enzyme';
-import { PureComponent, createElement, createRef } from 'react';
-import { toMockedInstance, setGlobalMockMethod } from 'to-mock';
+import {
+  getContextValue,
+  renderWithContext,
+} from '@ima/testing-library';
+import { PureComponent, createRef } from 'react';
 
 import forwardedSelect, {
   createStateSelector,
@@ -12,8 +12,6 @@ import forwardedSelect, {
   hoistNonReactStatic,
 } from '../select';
 
-setGlobalMockMethod(jest.fn);
-
 describe('plugin-select:', () => {
   const appState = {
     media: {
@@ -22,16 +20,7 @@ describe('plugin-select:', () => {
     },
     title: 'title',
   };
-  const componentContext = {
-    $Utils: {
-      $PageStateManager: toMockedInstance(PageStateManager, {
-        getState: () => {
-          return appState;
-        },
-      }),
-      $Dispatcher: toMockedInstance(Dispatcher),
-    },
-  };
+  let componentContext;
   const selectorMethods = [
     state => {
       return {
@@ -64,8 +53,13 @@ describe('plugin-select:', () => {
     settings: Object.assign({}, props.settings, { newSettingsProp: true }),
   });
 
-  beforeEach(() => {
+  beforeEach(async () => {
     global.$Debug = true;
+    componentContext = await getContextValue();
+
+    jest
+      .spyOn(componentContext.$Utils.$PageStateManager, 'getState')
+      .mockReturnValue(appState);
 
     setCreatorOfStateSelector(createStateSelector);
   });
@@ -127,7 +121,6 @@ describe('plugin-select:', () => {
   });
 
   describe('select', () => {
-    let wrapper = null;
     const defaultProps = {
       props: 'props',
       multiplier: 0.5,
@@ -146,88 +139,101 @@ describe('plugin-select:', () => {
       }
 
       render() {
-        return <h1>text</h1>;
+        return (
+          <div>
+            {JSON.stringify(this.props, null, 2)}
+            ref?: {this.props.forwardedRef ? 'true' : 'false'}
+          </div>
+        );
       }
     }
 
-    const MockContextProvider = ({ children }) => (
-      <PageContext.Provider value={componentContext}>
-        {children}
-      </PageContext.Provider>
-    );
-
-    it('should render component', () => {
-      wrapper = shallow(createElement(Component, defaultProps), {
-        context: componentContext,
-      });
+    it('should render component', async () => {
+      const { container } = await renderWithContext(
+        <Component {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with extraProps', () => {
+    it('should render component with extraProps', async () => {
       let EnhancedComponent = select(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with extraProps modifies by ownProps', () => {
+    it('should render component with extraProps modifies by ownProps', async () => {
       let EnhancedComponent = select(
         ...selectorMethods,
         selectorUsingProps
       )(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with extraProps replaced by ownProps', () => {
+    it('should render component with extraProps replaced by ownProps', async () => {
       let EnhancedComponent = select(
         ...selectorMethods,
         selectorReplaceProps
       )(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should add listener to dispatcher after mounting to DOM', () => {
+    it('should add listener to dispatcher after mounting to DOM', async () => {
       let EnhancedComponent = select(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
+      jest.spyOn(componentContext.$Utils.$Dispatcher, 'listen');
+
+      await renderWithContext(<EnhancedComponent {...defaultProps} />, {
+        contextValue: componentContext,
       });
 
       expect(componentContext.$Utils.$Dispatcher.listen).toHaveBeenCalled();
     });
 
-    it('should remove listener to dispatcher before unmounting from DOM', () => {
+    it('should remove listener to dispatcher before unmounting from DOM', async () => {
       let EnhancedComponent = select(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      jest.spyOn(componentContext.$Utils.$Dispatcher, 'unlisten');
+
+      const { unmount } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      wrapper.unmount();
+      unmount();
 
       expect(componentContext.$Utils.$Dispatcher.unlisten).toHaveBeenCalled();
     });
 
-    it('should render component with extraProps and own createStateSelector', () => {
+    it('should render component with extraProps and own createStateSelector', async () => {
       setCreatorOfStateSelector((...selectors) => {
         return (state, context) => {
           return selectors.reduce((result, selector) => {
@@ -237,28 +243,32 @@ describe('plugin-select:', () => {
       });
       let EnhancedComponent = select(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with changed props', () => {
+    it('should render component with changed props', async () => {
       let EnhancedComponent = select(selectorUsingProps)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container, rerender } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
-      wrapper.setProps({ multiplier: 3 });
+      rerender(<EnhancedComponent {...defaultProps} multiplier={3} />);
 
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with extraProps and own static methods', () => {
+    it('should render component with extraProps and own static methods', async () => {
       setHoistStaticMethod((TargetComponent, Original) => {
         const keys = Object.getOwnPropertyNames(Original);
 
@@ -275,33 +285,34 @@ describe('plugin-select:', () => {
       });
       let EnhancedComponent = select(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
       expect(typeof EnhancedComponent.myCustom === 'function').toBeTruthy();
       expect(typeof EnhancedComponent.defaultProps === 'function').toBeTruthy();
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should forward ref', () => {
+    it('should forward ref', async () => {
       let EnhancedComponent = forwardedSelect(...selectorMethods)(Component);
+      const componentRef = createRef();
 
-      wrapper = shallow(
-        createElement(EnhancedComponent, {
-          ...defaultProps,
-          ref: createRef(),
-        }),
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} ref={componentRef} />,
         {
-          context: componentContext,
+          contextValue: componentContext,
         }
       );
 
-      expect(wrapper).toMatchSnapshot();
+      expect(componentRef.current).toBeInstanceOf(Component);
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it('should render component with extraProps and own static methods for forwardedSelect', () => {
+    it('should render component with extraProps and own static methods for forwardedSelect', async () => {
       setHoistStaticMethod((TargetComponent, Original) => {
         const keys = Object.getOwnPropertyNames(Original);
 
@@ -318,14 +329,16 @@ describe('plugin-select:', () => {
       });
       let EnhancedComponent = forwardedSelect(...selectorMethods)(Component);
 
-      wrapper = mount(createElement(EnhancedComponent, defaultProps), {
-        context: componentContext,
-        wrappingComponent: MockContextProvider,
-      });
+      const { container } = await renderWithContext(
+        <EnhancedComponent {...defaultProps} />,
+        {
+          contextValue: componentContext,
+        }
+      );
 
       expect(typeof EnhancedComponent.myCustom === 'function').toBeTruthy();
       expect(typeof EnhancedComponent.defaultProps === 'function').toBeTruthy();
-      expect(wrapper).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/plugin-select/src/select/__tests__/__snapshots__/SelectSpec.js.snap b/packages/plugin-select/src/select/__tests__/__snapshots__/SelectSpec.js.snap
index fb2e3a33..4550e804 100644
--- a/packages/plugin-select/src/select/__tests__/__snapshots__/SelectSpec.js.snap
+++ b/packages/plugin-select/src/select/__tests__/__snapshots__/SelectSpec.js.snap
@@ -38,233 +38,145 @@ exports[`plugin-select: createStateSelector should select extra properties from
 `;
 
 exports[`plugin-select: select should forward ref 1`] = `
-<withContext(Component)
-  forwardedRef={
-    {
-      "current": null,
-    }
-  }
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
-/>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component 1`] = `
-<h1>
-  text
-</h1>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  }
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with changed props 1`] = `
-<withContext(Component)
-  multiplier={3}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={180}
-    multiplier={3}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-    width={270}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 3,
+  "settings": {
+    "color": "red"
+  },
+  "width": 270,
+  "height": 180
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps 1`] = `
-<withContext(Component)
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={60}
-    multiplier={0.5}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-    width={90}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps and own createStateSelector 1`] = `
-<withContext(Component)
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={60}
-    multiplier={0.5}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-    width={90}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps and own static methods 1`] = `
-<withContext(Component)
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={60}
-    multiplier={0.5}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-    width={90}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps and own static methods for forwardedSelect 1`] = `
-<ForwardRef(select(Component))
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <withContext(Component)
-    forwardedRef={null}
-    multiplier={0.5}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-  >
-    <Component
-      forwardedRef={null}
-      height={60}
-      multiplier={0.5}
-      props="props"
-      settings={
-        {
-          "color": "red",
-        }
-      }
-      width={90}
-    >
-      <h1>
-        text
-      </h1>
-    </Component>
-  </withContext(Component)>
-</ForwardRef(select(Component))>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "forwardedRef": null,
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps modifies by ownProps 1`] = `
-<withContext(Component)
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={30}
-    multiplier={0.5}
-    props="props"
-    settings={
-      {
-        "color": "red",
-      }
-    }
-    width={45}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.5,
+  "settings": {
+    "color": "red"
+  },
+  "width": 45,
+  "height": 30
+}
+  ref?: 
+  false
+</div>
 `;
 
 exports[`plugin-select: select should render component with extraProps replaced by ownProps 1`] = `
-<withContext(Component)
-  multiplier={0.5}
-  props="props"
-  settings={
-    {
-      "color": "red",
-    }
-  }
->
-  <Component
-    height={60}
-    multiplier={0.25}
-    props="props"
-    settings={
-      {
-        "color": "red",
-        "newSettingsProp": true,
-      }
-    }
-    width={90}
-  >
-    <h1>
-      text
-    </h1>
-  </Component>
-</withContext(Component)>
+<div>
+  {
+  "props": "props",
+  "multiplier": 0.25,
+  "settings": {
+    "color": "red",
+    "newSettingsProp": true
+  },
+  "width": 90,
+  "height": 60
+}
+  ref?: 
+  false
+</div>
 `;
diff --git a/packages/plugin-testing-integration/EnzymePageRenderer.js b/packages/plugin-testing-integration/EnzymePageRenderer.js
index 1b7e61e5..e63955bb 100644
--- a/packages/plugin-testing-integration/EnzymePageRenderer.js
+++ b/packages/plugin-testing-integration/EnzymePageRenderer.js
@@ -7,6 +7,8 @@ const {
 const { mount } = require('enzyme');
 const ReactDOM = require('react-dom');
 
+// @TODO: Delete this file with next major version as we are moving away from Enzyme and
+// this file is not being used in any known projects.
 class EnzymeReactDOM {
   constructor() {
     this._instances = [];