Remove Enzyme usage in places it's not needed (#22437)

microsoft · Apr 11, 2022 · 4bd9ec6 · 4bd9ec6
1 parent e49dc44
commit 4bd9ec6
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 73 deletions.
diff --git a/packages/react-cards/config/tests.js b/packages/react-cards/config/tests.js
@@ -9,10 +9,5 @@ setIconOptions({
   disableWarnings: true,
 });
 
-// Mock requestAnimationFrame for React 16+.
-global.requestAnimationFrame = callback => {
-  setTimeout(callback, 0);
-};
-
 // Configure enzyme.
 configure({ adapter: new Adapter() });
diff --git a/packages/react-icon-provider/config/tests.js b/packages/react-icon-provider/config/tests.js
@@ -1,12 +1 @@
 /** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Mock requestAnimationFrame for React 16+.
-global.requestAnimationFrame = callback => {
-  setTimeout(callback, 0);
-};
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });
diff --git a/packages/react-icon-provider/src/IconProvider.test.tsx b/packages/react-icon-provider/src/IconProvider.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { IconProvider, useIconSubset } from './IconProvider';
 import type { IIconSubset } from '@fluentui/style-utilities';
 
@@ -27,7 +27,7 @@ describe('IconProvider', () => {
       resolvedIcon = useIconSubset();
       return null;
     };
-    mount(
+    render(
       <IconProvider icons={testOverride}>
         <TestComponent />
       </IconProvider>,

diff --git a/packages/react-list/config/tests.js b/packages/react-list/config/tests.js
@@ -1,7 +1 @@
 /** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });
diff --git a/packages/react-window-provider/config/tests.js b/packages/react-window-provider/config/tests.js
@@ -1,7 +1 @@
 /** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });
diff --git a/packages/react-window-provider/src/WindowProvider.test.tsx b/packages/react-window-provider/src/WindowProvider.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useWindow, useDocument, WindowProvider } from './WindowProvider';
-import { safeMount } from '@fluentui/test-utilities';
+import { render } from '@testing-library/react';
 
 describe('WindowProvider', () => {
   let lastWindow: Window | undefined;
@@ -14,7 +14,7 @@ describe('WindowProvider', () => {
   };
 
   it('can provide defaults for node', () => {
-    safeMount(<Foo />);
+    render(<Foo />);
 
     expect(lastWindow).toBe(window);
     expect(lastDocument).toBe(document);
@@ -24,7 +24,7 @@ describe('WindowProvider', () => {
     const mockDocument = ({} as unknown) as Document;
     const mockWindow = ({ document: mockDocument } as unknown) as Window;
 
-    safeMount(
+    render(
       <WindowProvider window={mockWindow}>
         <Foo />
       </WindowProvider>,

diff --git a/packages/theme/config/tests.js b/packages/theme/config/tests.js
@@ -1,7 +1 @@
 /** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });
diff --git a/scripts/jest/jest-resources.js b/scripts/jest/jest-resources.js
@@ -42,45 +42,49 @@ module.exports = {
     testRegex: '(/__tests__/.*|\\.(test|spec))\\.js$',
   }),
   jestAliases,
-  createConfig: customConfig =>
-    merge(
-      {
-        moduleNameMapper: {
-          'ts-jest': resolve.sync('ts-jest'),
-          '\\.(scss)$': path.resolve(__dirname, 'jest-style-mock.js'),
-          KeyCodes: path.resolve(__dirname, 'jest-mock.js'),
-          ...jestAliases(),
-        },
+  /**
+   * @param {Partial<import('@jest/types').Config.InitialOptions>} [customConfig]
+   */
+  createConfig: (customConfig = {}) => {
+    /** @type {import('@jest/types').Config.InitialOptions} */
+    const defaultConfig = {
+      moduleNameMapper: {
+        'ts-jest': resolve.sync('ts-jest'),
+        '\\.(scss)$': path.resolve(__dirname, 'jest-style-mock.js'),
+        KeyCodes: path.resolve(__dirname, 'jest-mock.js'),
+        ...jestAliases(),
+      },
 
-        transform: {
-          '.(ts|tsx)': resolve.sync('ts-jest/dist'),
-        },
+      transform: {
+        '.(ts|tsx)': resolve.sync('ts-jest/dist'),
+      },
 
-        transformIgnorePatterns: ['/node_modules/', '/lib-commonjs/', '\\.js$'],
+      transformIgnorePatterns: ['/node_modules/', '/lib-commonjs/', '\\.js$'],
 
-        reporters: [path.resolve(__dirname, './jest-reporter.js')],
+      reporters: [path.resolve(__dirname, './jest-reporter.js')],
 
-        testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
-        moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+      testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
+      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
 
-        setupFiles: [path.resolve(__dirname, 'jest-setup.js')],
+      setupFiles: [path.resolve(__dirname, 'jest-setup.js')],
 
-        moduleDirectories: [
-          'node_modules',
-          path.resolve(packageRoot, 'node_modules'),
-          path.resolve(__dirname, '../node_modules'),
-        ],
+      moduleDirectories: [
+        'node_modules',
+        path.resolve(packageRoot, 'node_modules'),
+        path.resolve(__dirname, '../node_modules'),
+      ],
 
-        globals: {
-          'ts-jest': {
-            diagnostics: false,
-          },
+      globals: {
+        'ts-jest': {
+          diagnostics: false,
         },
+      },
 
-        testURL: 'http://localhost',
+      testURL: 'http://localhost',
 
-        watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
-      },
-      customConfig,
-    ),
+      watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+    };
+
+    return merge(defaultConfig, customConfig);
+  },
 };
diff --git a/scripts/jest/jest-setup.js b/scripts/jest/jest-setup.js
@@ -1,5 +1,7 @@
 // @ts-check
 
+// Jest setup file for all v8 packages
+
 // Mock requestAnimationFrame and cancelAnimationFrame for all packages
 // @ts-ignore
 global.requestAnimationFrame = callback => {

diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
@@ -1,10 +1,8 @@
 /**
- * Setup
+ * Setup for northstar/v0 packages (under packages/fluentui).
  * This is the bootstrap code that is run before any tests, utils, mocks.
  */
 
-/* eslint-disable no-console */
-
 const enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');