fix: [jest-environment] Allow custom export conditions (#1555)

* fix: [jest-environment] Respect custom export conditions * chore: [#1555] Use node as default until we do a major release as it is a breaking change --------- Co-authored-by: Alexander Early <alexander.early@reddit.com> Co-authored-by: David Ortner <david@ortner.se>
capricorn86 · Nov 6, 2024 · b949718 · b949718
1 parent d23834c
commit b949718
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/jest-environment/package.json b/packages/jest-environment/package.json
@@ -64,7 +64,7 @@
 		"@radix-ui/react-select": "^1.2.2",
 		"@testing-library/react": "^14.0.0",
 		"@testing-library/user-event": "^14.5.1",
-		"@vue/test-utils": "^2.4.4",
+		"@vue/test-utils": "^2.4.6",
 		"@types/jest": "29.5.2",
 		"@types/node": "^16.11.7",
 		"@types/react": "^18.2.0",
@@ -85,7 +85,7 @@
 		"rxjs": "^6.5.3",
 		"ts-jest": "^29.1.1",
 		"typescript": "^5.0.4",
-		"vue": "^3.2.31",
+		"vue": "^3.5.12",
 		"zone.js": "^0.10.3"
 	},
 	"engines": {

diff --git a/packages/jest-environment/src/index.ts b/packages/jest-environment/src/index.ts
@@ -19,6 +19,16 @@ export default class HappyDOMEnvironment implements JestEnvironment {
 	public global: Global.Global;
 	public moduleMocker: ModuleMocker;
 
+	/**
+	 * jest-environment-jsdom" has the default set to ['browser']
+	 * As changing this value would be a breaking change, we will keep it at ['node', 'node-addons'] until we do a major release
+	 *
+	 * @see https://stackoverflow.com/questions/72428323/jest-referenceerror-vue-is-not-defined
+	 */
+	public customExportConditions = ['node', 'node-addons'];
+
+	private _configuredExportConditions: string[];
+
 	/**
 	 * Constructor.
 	 *
@@ -47,6 +57,18 @@ export default class HappyDOMEnvironment implements JestEnvironment {
 			throw new Error('Unsupported jest version.');
 		}
 
+		if ('customExportConditions' in projectConfig.testEnvironmentOptions) {
+			const { customExportConditions } = projectConfig.testEnvironmentOptions;
+			if (
+				Array.isArray(customExportConditions) &&
+				customExportConditions.every((condition) => typeof condition === 'string')
+			) {
+				this._configuredExportConditions = customExportConditions;
+			} else {
+				throw new Error('Custom export conditions specified but they are not an array of strings');
+			}
+		}
+
 		// Initialize Window and Global
 		this.window = new Window({
 			url: 'http://localhost/',
@@ -99,6 +121,13 @@ export default class HappyDOMEnvironment implements JestEnvironment {
 			return happyDOMSetTimeout.call(this.global, ...args);
 		};
 	}
+	/**
+	 * Respect any export conditions specified as options
+	 * https://jestjs.io/docs/configuration#testenvironmentoptions-object
+	 */
+	public exportConditions(): string[] {
+		return this._configuredExportConditions ?? this.customExportConditions;
+	}
 
 	/**
 	 * Setup.

diff --git a/packages/jest-environment/test/react/React.test.tsx b/packages/jest-environment/test/react/React.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import * as ReactTestingLibrary from '@testing-library/react';
 import ReactTestingLibraryUserEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
 import {
 	ReactDivComponent,
 	ReactSelectComponent,
@@ -28,7 +27,7 @@ describe('React', () => {
 	});
 
 	it('Tests integration.', async () => {
-		act(() => {
+		React.act(() => {
 			ReactDOM.createRoot(appElement).render(<ReactDivComponent />);
 		});
 		await new Promise((resolve) => setTimeout(resolve, 2));
@@ -37,18 +36,18 @@ describe('React', () => {
 
 	it('Can unmount a component.', async () => {
 		const root = ReactDOM.createRoot(appElement);
-		act(() => {
+		React.act(() => {
 			root.render(<ReactDivComponent />);
 		});
 		await new Promise((resolve) => setTimeout(resolve, 2));
-		act(() => {
+		React.act(() => {
 			root.unmount();
 		});
 		expect(appElement.innerHTML).toBe('');
 	});
 
 	it('Handles adding and removing event listeners.', () => {
-		act(() => {
+		React.act(() => {
 			ReactDOM.createRoot(appElement).render(<ReactSelectComponent onChange={() => {}} />);
 		});
 	});
@@ -63,7 +62,7 @@ describe('React', () => {
 	});
 
 	it('Can render Radix UI Select component.', async () => {
-		act(() => {
+		React.act(() => {
 			ReactDOM.createRoot(appElement).render(
 				<Select.Root>
 					<Select.Trigger>