chore: upgrade jest 28 (#3923)

* chore: upgrade jest 28 * chore: up * chore: up * test: use jsdom * test: fix when no original property * test: up * test: update * test: fix * test: fix timers * test: fix containers * test: fix dataviz * chore: add changeset
Talend · Jul 5, 2022 · b16efa7 · b16efa7
1 parent 2a8de8a
commit b16efa7
Show file tree

Hide file tree

Showing 27 changed files with 967 additions and 750 deletions.
diff --git a/.changeset/metal-gorillas-turn.md b/.changeset/metal-gorillas-turn.md
@@ -0,0 +1,6 @@
+---
+'@talend/dynamic-cdn-webpack-plugin': major
+'@talend/eslint-plugin': major
+---
+
+Drop support for nodejs under 14
diff --git a/.changeset/tough-penguins-tie.md b/.changeset/tough-penguins-tie.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-jest': major
+---
+
+Major upgrade to jest 28 with adapter config
diff --git a/fork/dynamic-cdn-webpack-plugin/package.json b/fork/dynamic-cdn-webpack-plugin/package.json
@@ -10,7 +10,7 @@
     "url": "https://mastilver.com"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "publishConfig": {
     "access": "public"
@@ -47,7 +47,7 @@
     "all-contributors-cli": "^6.20.0",
     "codecov": "^3.8.3",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^26.6.3",
+    "jest": "^28.0.0",
     "mz": "^2.7.0",
     "rimraf": "^3.0.2",
     "webpack": "^5.72.0",

diff --git a/fork/module-to-cdn/package.json b/fork/module-to-cdn/package.json
@@ -15,7 +15,7 @@
     }
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "scripts": {
     "test": "jest index.test.js",
@@ -38,7 +38,7 @@
     "semver": "^7.3.7"
   },
   "devDependencies": {
-    "jest": "^26.6.3"
+    "jest": "^28.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/fork/react-bootstrap/src/Collapse.js b/fork/react-bootstrap/src/Collapse.js
@@ -1,3 +1,4 @@
+/* eslint-disable arrow-parens */
 import classNames from 'classnames';
 import css from 'dom-helpers/style';
 import React from 'react';
@@ -20,7 +21,8 @@ const MARGINS = {
 // reading a dimension prop will cause the browser to recalculate,
 // which will let our animations work
 function triggerBrowserReflow(node) {
-  node.offsetHeight; // eslint-disable-line no-unused-expressions
+  // eslint-disable-next-line mdx/no-unused-expressions
+  node.offsetHeight;
 }
 
 function getDimensionValue(dimension, elem) {
@@ -42,6 +44,8 @@ const collapseStyles = {
 };
 
 const propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
   /**
    * Show the component; triggers the expand or collapse animation
    */

diff --git a/fork/react-bootstrap/src/Collapse.test.js b/fork/react-bootstrap/src/Collapse.test.js
@@ -1,9 +1,14 @@
+/* eslint-disable arrow-parens */
+/**
+ * @jest-environment jsdom
+ */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import Collapse from './Collapse';
 
 describe('<Collapse>', () => {
+  // eslint-disable-next-line react/prop-types
   const Component = ({ children, ...props }) => (
     <Collapse getDimensionValue={() => 15} {...props}>
       <div>{children}</div>
@@ -39,16 +44,20 @@ describe('<Collapse>', () => {
     });
 
     afterAll(() => {
-      Object.defineProperty(
-        HTMLElement.prototype,
-        'scrollHeight',
-        originalOffsetHeight
-      );
-      Object.defineProperty(
-        HTMLElement.prototype,
-        'scrollWidth',
-        originalOffsetWidth
-      );
+      if (originalOffsetHeight) {
+        Object.defineProperty(
+          HTMLElement.prototype,
+          'scrollHeight',
+          originalOffsetHeight
+        );
+      }
+      if (originalOffsetWidth) {
+        Object.defineProperty(
+          HTMLElement.prototype,
+          'scrollWidth',
+          originalOffsetWidth
+        );
+      }
     });
 
     it('Should have collapsing class', () => {
@@ -129,6 +138,7 @@ describe('<Collapse>', () => {
     it('Should clear height after transition complete', (done) => {
       // given
       const onEntered = () => {
+        // eslint-disable-next-line jest-dom/prefer-to-have-style
         expect(screen.getByText('Panel content')).toHaveAttribute('style', '');
         done();
       };

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.test.js
@@ -59,7 +59,7 @@ describe('ActionDropdown', () => {
 		menuItems.at(0).find('SafeAnchor').simulate('click');
 
 		// then
-		expect(onSelectClick).toBeCalledWith(jasmine.anything(), props.items[0]);
+		expect(onSelectClick).toBeCalledWith(expect.anything(), props.items[0]);
 		expect(onItemClick.mock.calls[0][1]).toEqual({
 			action: { id: 'item1', label: 'Item 1' },
 			model: 'model',
@@ -70,7 +70,7 @@ describe('ActionDropdown', () => {
 		menuItems.at(1).find('SafeAnchor').simulate('click');
 
 		// then
-		expect(onSelectClick).toBeCalledWith(jasmine.anything(), props.items[1]);
+		expect(onSelectClick).toBeCalledWith(expect.anything(), props.items[1]);
 		expect(onItemClick.mock.calls[1][1]).toEqual({
 			action: { id: 'item2', label: 'Item 2' },
 			model: 'model',
@@ -172,7 +172,11 @@ describe('Dropup', () => {
 		wrapper.find('button').first().simulate('click');
 
 		// then
-		expect(container.firstChild.classList.contains('dropup')).toBe(isDropupExpected);
+		if (!isDropupExpected) {
+			expect(container.firstChild).not.toHaveClass('dropup');
+		} else {
+			expect(container.firstChild).toHaveClass('dropup');
+		}
 	}
 
 	cases('dropdown/dropup switch', testSwitch, [

diff --git a/packages/components/src/DataViewer/Managers/TreeManager/TreeManager.test.js b/packages/components/src/DataViewer/Managers/TreeManager/TreeManager.test.js
@@ -11,7 +11,7 @@ describe('addPathsToCollection', () => {
 		const myMap = Immutable.Map();
 		const myList = Immutable.List();
 		const newMap = addPathsToCollection(0, myMap, myList, 'jsonpath');
-		expect(newMap.get(0)).toEqual(Immutable.List(['jsonpath']));
+		expect(newMap.get(0).toJS()).toEqual(['jsonpath']);
 	});
 });
 
@@ -20,7 +20,7 @@ describe('removePathsFromCollection', () => {
 		const myList = Immutable.List(['jsonpath', 'somestuff']);
 		const myMap = Immutable.Map({ 0: myList });
 		const newCollection = removePathsFromCollection(0, myMap, myList, 'jsonpath');
-		expect(newCollection.get(0)).toEqual(Immutable.List(['somestuff']));
+		expect(newCollection.get(0).toJS()).toEqual(['somestuff']);
 	});
 });
 

diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js
@@ -40,7 +40,6 @@ describe('CellDatetime', () => {
 		jest.unmock('../../i18n/DateFnsLocale/locale');
 		jest.unmock('date-fns/distance_in_words_to_now');
 		jest.unmock('date-fns/format');
-		jest.unmock('../../utils/date');
 	});
 
 	it('should render CellDatetime', () => {

diff --git a/packages/containers/src/List/List.test.js b/packages/containers/src/List/List.test.js
@@ -126,7 +126,7 @@ describe('Container List', () => {
 		expect(props.list.cellDictionary).toEqual({
 			custom: { cellRenderer: 'my custom component' },
 			title: {
-				cellRenderer: jasmine.any(Function),
+				cellRenderer: expect.any(Function),
 				cellType: 'title',
 				className: 'tc-list-title-cell',
 			},
@@ -427,8 +427,8 @@ describe('Container List', () => {
 			// when
 			wrapper.find('List').props().list.itemProps.onToggle({}, { id: 1 });
 			// then
-			expect(multiSelectionSetting.setState.mock.calls[0][0]).toEqual({
-				selectedItems: new ImmutableList([1]),
+			expect(multiSelectionSetting.setState.mock.calls[0][0]).toMatchObject({
+				selectedItems: expect.any(ImmutableList),
 			});
 		});
 

diff --git a/packages/containers/src/SelectObject/SelectObject.test.js b/packages/containers/src/SelectObject/SelectObject.test.js
@@ -72,28 +72,28 @@ describe('Container SelectObject', () => {
 		const item1 = new Immutable.Map({ id: '1', name: 'foo' });
 		const item2 = new Immutable.Map({ id: '2', name: 'bar' });
 		const sourceData = new Immutable.List([item1, item2]);
-		const filteredData = new Immutable.List([item1.set('currentPosition', 'root')]);
 
 		const wrapper = shallow(<Container tree={tree} sourceData={sourceData} query="f" />, {
 			context,
 		});
 
 		const props = wrapper.props();
-		expect(props).toEqual({
+		expect(props).toMatchObject({
 			breadCrumbsRootLabel: 'root',
 			idAttr: 'id',
 			nameAttr: 'name',
 			query: 'f',
 			selected: item1.toJS(),
 			sourceData,
-			filteredData,
+			filteredData: expect.any(Immutable.List),
 			results: {
 				idAttr: 'id',
 				nameAttr: 'name',
 				onClick: wrapper.instance().onResultsClick,
 				selectedId: '1',
 			},
 		});
+		expect(props.filteredData.toJS()).toEqual([item1.set('currentPosition', 'root').toJS()]);
 	});
 	it('should call props.setState when onTreeClick is called', () => {
 		const props = { idAttr: 'id', setState: jest.fn() };

diff --git a/packages/containers/src/actionOnClick.test.js b/packages/containers/src/actionOnClick.test.js
@@ -6,7 +6,7 @@ describe('#getOnClick', () => {
 			actionCreator: 'menu:link',
 		});
 
-		expect(actionOnClick.onClick).toEqual(jasmine.any(Function));
+		expect(actionOnClick.onClick).toEqual(expect.any(Function));
 	});
 
 	it('should generate onClick with dispatch', () => {
@@ -16,7 +16,7 @@ describe('#getOnClick', () => {
 			},
 		});
 
-		expect(actionOnClick.onClick).toEqual(jasmine.any(Function));
+		expect(actionOnClick.onClick).toEqual(expect.any(Function));
 	});
 
 	it('should not generate onClick when there is href', () => {

diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.test.js b/packages/dataviz/src/components/GeoChart/GeoChart.test.js
@@ -1,54 +1,58 @@
+/* eslint-disable import/no-unresolved */
+jest.mock('@talend/assets-api', () => ({
+	getJSON: async url => {
+		return new Promise(resolve => resolve(require(url.replace('/dist', '../../..'))));
+	},
+	getURL: jest.fn(() => '/url'),
+}));
+
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+
 import GeoChart from './GeoChart.component';
 import { getGeoChartConfig } from './GeoChart.utils';
 import styles from './GeoChart.scss';
 
-function getTopo(url) {
-	const last = url.split('/').pop();
-	return require(`../../../assets/maps/${last}`);
-}
-
 describe('GeoChart component', () => {
 	let defaultProps;
-	let originalfetch;
 	beforeEach(async () => {
 		jest.resetAllMocks();
-		originalfetch = global.fetch;
-		global.fetch = jest.fn(url => ({ ok: true, json: () => Promise.resolve(getTopo(url)) }));
 		defaultProps = {
 			data: [
 				{ key: 'Occitanie', value: 10 },
 				{ key: 'Martinique', value: 20 },
 			],
 			columnName: 'name',
-			chartConfig: await getGeoChartConfig('FR_REGION'),
 			onSelection: jest.fn(),
 		};
 	});
-	afterEach(() => {
-		global.fetch = originalfetch;
-	});
 
-	it('Should match data', () => {
-		const component = mount(<GeoChart {...defaultProps} />).render();
+	it('Should match data', async () => {
+		const chartConfig = await getGeoChartConfig('FR_REGION');
+		render(<GeoChart {...defaultProps} chartConfig={chartConfig} />);
 
-		expect(component.find(`.${styles['geo-chart__feature']}`)).toHaveLength(18);
-		expect(component.find(`.${styles['geo-chart__feature--disabled']}`)).toHaveLength(16);
-		expect(component.find('[data-key="Occitanie"][data-value="10"]')).toHaveLength(1);
+		expect(document.querySelectorAll(`.${styles['geo-chart__feature']}`)).toHaveLength(18);
+		expect(document.querySelectorAll(`.${styles['geo-chart__feature--disabled']}`)).toHaveLength(
+			16,
+		);
+		expect(document.querySelectorAll('[data-key="Occitanie"][data-value="10"]')).toHaveLength(1);
 	});
 
-	it('Should be case and punctuation insensitive', () => {
-		const component = mount(
-			<GeoChart {...defaultProps} data={[{ key: 'Occi tanié', value: 10 }]} />,
-		).render();
-
-		expect(component.find('[data-key="Occi tanié"][data-value="10"]')).toHaveLength(1);
+	it('Should be case and punctuation insensitive', async () => {
+		const chartConfig = await getGeoChartConfig('FR_REGION');
+		render(
+			<GeoChart
+				{...defaultProps}
+				chartConfig={chartConfig}
+				data={[{ key: 'Occi tanié', value: 10 }]}
+			/>,
+		);
+		expect(document.querySelectorAll('[data-key="Occi tanié"][data-value="10"]')).toHaveLength(1);
 	});
 
 	it('Should match data in configured properties only', async () => {
 		const chartConfig = await getGeoChartConfig('US_STATE_CODE');
-		const component = mount(
+		render(
 			<GeoChart
 				{...defaultProps}
 				chartConfig={chartConfig}
@@ -57,10 +61,9 @@ describe('GeoChart component', () => {
 					{ key: 'New York', value: 10 },
 				]}
 			/>,
-		).render();
-		expect(global.fetch).toHaveBeenCalled();
+		);
 
-		expect(component.find('[data-key="TX"]')).toHaveLength(1);
-		expect(component.find('[data-key="New York"]')).toHaveLength(0);
+		expect(document.querySelectorAll('[data-key="TX"]')).toHaveLength(1);
+		expect(document.querySelectorAll('[data-key="New York"]')).toHaveLength(0);
 	});
 });
diff --git a/packages/design-tokens/scripts/umd.test.js b/packages/design-tokens/scripts/umd.test.js
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 /* eslint-disable global-require */
 /* eslint-disable import/no-dynamic-require */
 const fs = require('fs');

diff --git a/packages/forms/src/UIForm/fields/NestedListView/NestedListView.test.js b/packages/forms/src/UIForm/fields/NestedListView/NestedListView.test.js
@@ -6,6 +6,7 @@ import { NestedListViewWidget } from './NestedListView.component';
 import { getDisplayedItems, prepareItemsFromSchema } from './NestedListView.utils';
 
 jest.useFakeTimers();
+jest.spyOn(global, 'setTimeout');
 
 describe('NestedListView component', () => {
 	let props;

diff --git a/packages/local-libs-webpack-plugin/package.json b/packages/local-libs-webpack-plugin/package.json
@@ -27,6 +27,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "jest-cli": "^26.6.3"
+    "jest-cli": "^28.0.0"
   }
 }
diff --git a/tools/babel-plugin-assets-api/package.json b/tools/babel-plugin-assets-api/package.json
@@ -13,9 +13,9 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^28.0.0",
     "babel-plugin-tester": "^10.1.0",
-    "jest": "^26.6.3"
+    "jest": "^28.0.0"
   },
   "jest": {
     "verbose": true,

diff --git a/tools/babel-plugin-import-d3/package.json b/tools/babel-plugin-import-d3/package.json
@@ -19,9 +19,9 @@
   "devDependencies": {
     "@babel/core": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^28.0.0",
     "babel-plugin-tester": "^10.1.0",
-    "jest": "^26.6.3"
+    "jest": "^28.0.0"
   },
   "jest": {
     "transform": {