From 4bd9ec690bef7825fafefd505b40e78a0aef0ada Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Mon, 11 Apr 2022 12:33:14 -0700 Subject: [PATCH] Remove Enzyme usage in places it's not needed (#22437) --- packages/react-cards/config/tests.js | 5 -- packages/react-icon-provider/config/tests.js | 11 ---- .../src/IconProvider.test.tsx | 4 +- packages/react-list/config/tests.js | 6 -- .../react-window-provider/config/tests.js | 6 -- .../src/WindowProvider.test.tsx | 6 +- packages/theme/config/tests.js | 6 -- scripts/jest/jest-resources.js | 66 ++++++++++--------- scripts/jest/jest-setup.js | 2 + scripts/jest/setupTests.js | 4 +- 10 files changed, 43 insertions(+), 73 deletions(-) diff --git a/packages/react-cards/config/tests.js b/packages/react-cards/config/tests.js index c8f540d3da2cb..7d26fb36b5d0b 100644 --- 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 index f1e4a5670a217..2e211ae9e2142 100644 --- 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 index a62636d493d31..3474f843d0762 100644 --- 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( , diff --git a/packages/react-list/config/tests.js b/packages/react-list/config/tests.js index 3882d3702ddc9..2e211ae9e2142 100644 --- 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 index 3882d3702ddc9..2e211ae9e2142 100644 --- 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 index b4276dfb79341..0e49133e4d2d6 100644 --- 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(); + render(); 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( , diff --git a/packages/theme/config/tests.js b/packages/theme/config/tests.js index 3882d3702ddc9..2e211ae9e2142 100644 --- 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 index a5a2219691b4a..9c21cf68ab8d0 100644 --- 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} [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 index f58ab42efcf6f..2746eb3135b53 100644 --- 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 index cb2445b48461b..caadf05fc19d1 100644 --- 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');