@atomic-testing/react-legacy 0.73.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tianzhen Lin (Tangent)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# @atomic-testing/react-legacy
+
+Adapter for integrating [Atomic Testing](https://atomic-testing.dev) with [React 16/17](https://react.dev).
+It maps React components to the core scene part APIs.
+
+## The problem
+
+Writing maintainable tests for UIs built with third–party component libraries
+like Material UI or Bootstrap can be tricky. Documentation on how a test
+should communicate with these components is often lacking, so tests easily end
+up coupled to implementation details. As your application grows you need your
+tests to scale without constantly reworking them.
+
+## The solution
+
+[Atomic Testing](https://atomic-testing.dev) provides a consistent way to interact with both third–party and
+first–party components across different test environments. It focuses on
+**reusability**, **composability** and **adaptability**, letting you build
+higher–level test strategies that work for DOM or end–to–end testing alike.
+
+## Installation
+
+```bash
+npm install @atomic-testing/core @atomic-testing/react-legacy --save-dev
+```
+
+Refer to the [React integration guide](https://atomic-testing.dev/) for examples.
+
+## Example
+
+If you use MUI/Material UI components, have a look at the
+[@atomic-testing/component-driver-mui-v5](https://www.npmjs.com/package/@atomic-testing/component-driver-mui-v5)
+package for a dedicated example.
+
+1. Install the core library and basic HTML drivers along with this React adapter:
+
+   ```bash
+   npm install @atomic-testing/core @atomic-testing/react-legacy @atomic-testing/component-driver-html --save-dev
+   ```
+
+2. Create a small component and assign `data-testid` values to the elements you want to interact with:
+
+   ```tsx title="Counter.tsx"
+   import { useState } from 'react';
+
+   export function Counter() {
+     const [count, setCount] = useState(0);
+     return (
+       <div>
+         <span data-testid='count'>{count}</span>
+         <button data-testid='increment' onClick={() => setCount(c => c + 1)}>
+           Increment
+         </button>
+       </div>
+     );
+   }
+   ```
+
+3. Define a `ScenePart` describing the count display and button using the HTML drivers:
+
+   ```ts title="counterScenePart.ts"
+   import { HTMLButtonDriver, HTMLElementDriver } from '@atomic-testing/component-driver-html';
+   import { byDataTestId, ScenePart } from '@atomic-testing/core';
+
+   export const counterScenePart = {
+     count: { locator: byDataTestId('count'), driver: HTMLElementDriver },
+     increment: { locator: byDataTestId('increment'), driver: HTMLButtonDriver },
+   } satisfies ScenePart;
+   ```
+
+4. Write a test using `createTestEngine` to render the component and interact with it:
+
+   ```ts title="Counter.test.tsx"
+    import { createTestEngine } from '@atomic-testing/react-19';
+
+    import { Counter } from './Counter';
+    import { counterScenePart } from './counterScenePart';
+
+    test('increments when the button is clicked', async () => {
+      const engine = createTestEngine(<Counter />, counterScenePart);
+
+      expect(await engine.parts.count.getText()).toBe('0');
+      await engine.parts.increment.click();
+      expect(await engine.parts.count.getText()).toBe('1');
+
+      await engine.cleanUp();
+    });
+   ```
+
+For more in‑depth information, visit
+[https://atomic-testing.dev](https://atomic-testing.dev).

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { IComponentDriverOption, ScenePart, TestEngine } from "@atomic-testing/core";
+
+//#region src/types.d.ts
+interface IReactTestEngineOption extends IComponentDriverOption {
+  rootElement?: Element;
+}
+//#endregion
+//#region src/createTestEngine.d.ts
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes a react node and render it into a container element.  For rendered
+ * components, use createRenderedLegacyTestEngine
+ * @param node The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+declare function createTestEngine<T extends ScenePart>(node: JSX.Element, partDefinitions: T, option?: Readonly<Partial<IReactTestEngineOption>>): TestEngine<T>;
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes an html element purportedly rendered by React and create a test engine for it, it
+ * can be useful in environment such as Storybook where Storybook renders the component and the test
+ * @param rootElement The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+declare function createRenderedTestEngine<T extends ScenePart>(rootElement: HTMLElement, partDefinitions: T, _option?: Readonly<Partial<IReactTestEngineOption>>): TestEngine<T>;
+//#endregion
+export { IReactTestEngineOption, createRenderedTestEngine, createTestEngine };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { IComponentDriverOption, ScenePart, TestEngine } from "@atomic-testing/core";
+
+//#region src/types.d.ts
+interface IReactTestEngineOption extends IComponentDriverOption {
+  rootElement?: Element;
+}
+//#endregion
+//#region src/createTestEngine.d.ts
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes a react node and render it into a container element.  For rendered
+ * components, use createRenderedLegacyTestEngine
+ * @param node The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+declare function createTestEngine<T extends ScenePart>(node: JSX.Element, partDefinitions: T, option?: Readonly<Partial<IReactTestEngineOption>>): TestEngine<T>;
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes an html element purportedly rendered by React and create a test engine for it, it
+ * can be useful in environment such as Storybook where Storybook renders the component and the test
+ * @param rootElement The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+declare function createRenderedTestEngine<T extends ScenePart>(rootElement: HTMLElement, partDefinitions: T, _option?: Readonly<Partial<IReactTestEngineOption>>): TestEngine<T>;
+//#endregion
+export { IReactTestEngineOption, createRenderedTestEngine, createTestEngine };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,83 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const react_dom = __toESM(require("react-dom"));
+const react_dom_test_utils = __toESM(require("react-dom/test-utils"));
+const __atomic_testing_core = __toESM(require("@atomic-testing/core"));
+const __atomic_testing_react_core = __toESM(require("@atomic-testing/react-core"));
+
+//#region src/createTestEngine.ts
+let _rootId = 0;
+function getNextRootElementId() {
+	return `${_rootId++}`;
+}
+const rootElementAttributeName = "data-atomic-testing-react-legacy";
+/**
+* Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+* This function takes a react node and render it into a container element.  For rendered
+* components, use createRenderedLegacyTestEngine
+* @param node The React node to render
+* @param partDefinitions The scene part definitions
+* @param option
+* @returns The test engine
+*/
+function createTestEngine(node, partDefinitions, option) {
+	const rootEl = option?.rootElement ?? document.body;
+	const container = rootEl.appendChild(document.createElement("div"));
+	const rootId = getNextRootElementId();
+	container.setAttribute(rootElementAttributeName, rootId);
+	(0, react_dom_test_utils.act)(() => {
+		react_dom.default.render(node, container);
+	});
+	const cleanup = () => {
+		react_dom.default.unmountComponentAtNode(container);
+		rootEl.removeChild(container);
+		return Promise.resolve();
+	};
+	const engine = new __atomic_testing_core.TestEngine((0, __atomic_testing_core.byAttribute)(rootElementAttributeName, rootId), new __atomic_testing_react_core.ReactInteractor(), { parts: partDefinitions }, cleanup);
+	return engine;
+}
+/**
+* Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+* This function takes an html element purportedly rendered by React and create a test engine for it, it
+* can be useful in environment such as Storybook where Storybook renders the component and the test
+* @param rootElement The React node to render
+* @param partDefinitions The scene part definitions
+* @param option
+* @returns The test engine
+*/
+function createRenderedTestEngine(rootElement, partDefinitions, _option) {
+	const rootId = getNextRootElementId();
+	rootElement.setAttribute(rootElementAttributeName, rootId);
+	const cleanup = () => {
+		rootElement.removeAttribute(rootElementAttributeName);
+		return Promise.resolve();
+	};
+	const engine = new __atomic_testing_core.TestEngine((0, __atomic_testing_core.byAttribute)(rootElementAttributeName, rootId), new __atomic_testing_react_core.ReactInteractor(), { parts: partDefinitions }, cleanup);
+	return engine;
+}
+
+//#endregion
+exports.createRenderedTestEngine = createRenderedTestEngine;
+exports.createTestEngine = createTestEngine;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["node: JSX.Element","partDefinitions: T","option?: Readonly<Partial<IReactTestEngineOption>>","TestEngine","ReactInteractor","rootElement: HTMLElement","_option?: Readonly<Partial<IReactTestEngineOption>>"],"sources":["../src/createTestEngine.ts"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';\n\nimport { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { ReactInteractor } from '@atomic-testing/react-core';\n\nimport { IReactTestEngineOption } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-react-legacy';\n\n/**\n * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19\n * This function takes a react node and render it into a container element.  For rendered\n * components, use createRenderedLegacyTestEngine\n * @param node The React node to render\n * @param partDefinitions The scene part definitions\n * @param option\n * @returns The test engine\n */\nexport function createTestEngine<T extends ScenePart>(\n  node: JSX.Element,\n  partDefinitions: T,\n  option?: Readonly<Partial<IReactTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  act(() => {\n    ReactDOM.render(node, container);\n  });\n  const cleanup = () => {\n    ReactDOM.unmountComponentAtNode(container);\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  const engine = new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new ReactInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n\n  return engine;\n}\n\n/**\n * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19\n * This function takes an html element purportedly rendered by React and create a test engine for it, it\n * can be useful in environment such as Storybook where Storybook renders the component and the test\n * @param rootElement The React node to render\n * @param partDefinitions The scene part definitions\n * @param option\n * @returns The test engine\n */\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IReactTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  const engine = new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new ReactInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n\n  return engine;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAI,UAAU;AACd,SAAS,uBAAuB;AAC9B,SAAQ,EAAE,UAAU;AACrB;AAED,MAAM,2BAA2B;;;;;;;;;;AAWjC,SAAgB,iBACdA,MACAC,iBACAC,QACe;CACf,MAAM,SAAS,QAAQ,eAAe,SAAS;CAC/C,MAAM,YAAY,OAAO,YAAY,SAAS,cAAc,MAAM,CAAC;CACnE,MAAM,SAAS,sBAAsB;AACrC,WAAU,aAAa,0BAA0B,OAAO;AAExD,+BAAI,MAAM;AACR,oBAAS,OAAO,MAAM,UAAU;CACjC,EAAC;CACF,MAAM,UAAU,MAAM;AACpB,oBAAS,uBAAuB,UAAU;AAC1C,SAAO,YAAY,UAAU;AAC7B,SAAO,QAAQ,SAAS;CACzB;CAED,MAAM,SAAS,IAAIC,iCACjB,uCAAY,0BAA0B,OAAO,EAC7C,IAAIC,+CACJ,EACE,OAAO,gBACR,GACD;AAGF,QAAO;AACR;;;;;;;;;;AAWD,SAAgB,yBACdC,aACAJ,iBACAK,SACe;CACf,MAAM,SAAS,sBAAsB;AACrC,aAAY,aAAa,0BAA0B,OAAO;CAE1D,MAAM,UAAU,MAAM;AACpB,cAAY,gBAAgB,yBAAyB;AACrD,SAAO,QAAQ,SAAS;CACzB;CAED,MAAM,SAAS,IAAIH,iCACjB,uCAAY,0BAA0B,OAAO,EAC7C,IAAIC,+CACJ,EACE,OAAO,gBACR,GACD;AAGF,QAAO;AACR"}

package/dist/index.mjs

@@ -0,0 +1,59 @@
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+import { TestEngine, byAttribute } from "@atomic-testing/core";
+import { ReactInteractor } from "@atomic-testing/react-core";
+
+//#region src/createTestEngine.ts
+let _rootId = 0;
+function getNextRootElementId() {
+	return `${_rootId++}`;
+}
+const rootElementAttributeName = "data-atomic-testing-react-legacy";
+/**
+* Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+* This function takes a react node and render it into a container element.  For rendered
+* components, use createRenderedLegacyTestEngine
+* @param node The React node to render
+* @param partDefinitions The scene part definitions
+* @param option
+* @returns The test engine
+*/
+function createTestEngine(node, partDefinitions, option) {
+	const rootEl = option?.rootElement ?? document.body;
+	const container = rootEl.appendChild(document.createElement("div"));
+	const rootId = getNextRootElementId();
+	container.setAttribute(rootElementAttributeName, rootId);
+	act(() => {
+		ReactDOM.render(node, container);
+	});
+	const cleanup = () => {
+		ReactDOM.unmountComponentAtNode(container);
+		rootEl.removeChild(container);
+		return Promise.resolve();
+	};
+	const engine = new TestEngine(byAttribute(rootElementAttributeName, rootId), new ReactInteractor(), { parts: partDefinitions }, cleanup);
+	return engine;
+}
+/**
+* Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+* This function takes an html element purportedly rendered by React and create a test engine for it, it
+* can be useful in environment such as Storybook where Storybook renders the component and the test
+* @param rootElement The React node to render
+* @param partDefinitions The scene part definitions
+* @param option
+* @returns The test engine
+*/
+function createRenderedTestEngine(rootElement, partDefinitions, _option) {
+	const rootId = getNextRootElementId();
+	rootElement.setAttribute(rootElementAttributeName, rootId);
+	const cleanup = () => {
+		rootElement.removeAttribute(rootElementAttributeName);
+		return Promise.resolve();
+	};
+	const engine = new TestEngine(byAttribute(rootElementAttributeName, rootId), new ReactInteractor(), { parts: partDefinitions }, cleanup);
+	return engine;
+}
+
+//#endregion
+export { createRenderedTestEngine, createTestEngine };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["node: JSX.Element","partDefinitions: T","option?: Readonly<Partial<IReactTestEngineOption>>","rootElement: HTMLElement","_option?: Readonly<Partial<IReactTestEngineOption>>"],"sources":["../src/createTestEngine.ts"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';\n\nimport { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';\nimport { ReactInteractor } from '@atomic-testing/react-core';\n\nimport { IReactTestEngineOption } from './types';\n\nlet _rootId = 0;\nfunction getNextRootElementId() {\n  return `${_rootId++}`;\n}\n\nconst rootElementAttributeName = 'data-atomic-testing-react-legacy';\n\n/**\n * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19\n * This function takes a react node and render it into a container element.  For rendered\n * components, use createRenderedLegacyTestEngine\n * @param node The React node to render\n * @param partDefinitions The scene part definitions\n * @param option\n * @returns The test engine\n */\nexport function createTestEngine<T extends ScenePart>(\n  node: JSX.Element,\n  partDefinitions: T,\n  option?: Readonly<Partial<IReactTestEngineOption>>\n): TestEngine<T> {\n  const rootEl = option?.rootElement ?? document.body;\n  const container = rootEl.appendChild(document.createElement('div'));\n  const rootId = getNextRootElementId();\n  container.setAttribute(rootElementAttributeName, rootId);\n\n  act(() => {\n    ReactDOM.render(node, container);\n  });\n  const cleanup = () => {\n    ReactDOM.unmountComponentAtNode(container);\n    rootEl.removeChild(container);\n    return Promise.resolve();\n  };\n\n  const engine = new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new ReactInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n\n  return engine;\n}\n\n/**\n * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19\n * This function takes an html element purportedly rendered by React and create a test engine for it, it\n * can be useful in environment such as Storybook where Storybook renders the component and the test\n * @param rootElement The React node to render\n * @param partDefinitions The scene part definitions\n * @param option\n * @returns The test engine\n */\nexport function createRenderedTestEngine<T extends ScenePart>(\n  rootElement: HTMLElement,\n  partDefinitions: T,\n  _option?: Readonly<Partial<IReactTestEngineOption>>\n): TestEngine<T> {\n  const rootId = getNextRootElementId();\n  rootElement.setAttribute(rootElementAttributeName, rootId);\n\n  const cleanup = () => {\n    rootElement.removeAttribute(rootElementAttributeName);\n    return Promise.resolve();\n  };\n\n  const engine = new TestEngine(\n    byAttribute(rootElementAttributeName, rootId),\n    new ReactInteractor(),\n    {\n      parts: partDefinitions,\n    },\n    cleanup\n  );\n\n  return engine;\n}\n"],"mappings":";;;;;;AAQA,IAAI,UAAU;AACd,SAAS,uBAAuB;AAC9B,SAAQ,EAAE,UAAU;AACrB;AAED,MAAM,2BAA2B;;;;;;;;;;AAWjC,SAAgB,iBACdA,MACAC,iBACAC,QACe;CACf,MAAM,SAAS,QAAQ,eAAe,SAAS;CAC/C,MAAM,YAAY,OAAO,YAAY,SAAS,cAAc,MAAM,CAAC;CACnE,MAAM,SAAS,sBAAsB;AACrC,WAAU,aAAa,0BAA0B,OAAO;AAExD,KAAI,MAAM;AACR,WAAS,OAAO,MAAM,UAAU;CACjC,EAAC;CACF,MAAM,UAAU,MAAM;AACpB,WAAS,uBAAuB,UAAU;AAC1C,SAAO,YAAY,UAAU;AAC7B,SAAO,QAAQ,SAAS;CACzB;CAED,MAAM,SAAS,IAAI,WACjB,YAAY,0BAA0B,OAAO,EAC7C,IAAI,mBACJ,EACE,OAAO,gBACR,GACD;AAGF,QAAO;AACR;;;;;;;;;;AAWD,SAAgB,yBACdC,aACAF,iBACAG,SACe;CACf,MAAM,SAAS,sBAAsB;AACrC,aAAY,aAAa,0BAA0B,OAAO;CAE1D,MAAM,UAAU,MAAM;AACpB,cAAY,gBAAgB,yBAAyB;AACrD,SAAO,QAAQ,SAAS;CACzB;CAED,MAAM,SAAS,IAAI,WACjB,YAAY,0BAA0B,OAAO,EAC7C,IAAI,mBACJ,EACE,OAAO,gBACR,GACD;AAGF,QAAO;AACR"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@atomic-testing/react-legacy",
+  "version": "0.73.0",
+  "description": "Adapter for testing React 17 and earlier",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "author": "Tianzhen Lin <tangent@usa.net>",
+  "keywords": [
+    "testing",
+    "react",
+    "legacy"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atomic-testing/atomic-testing.git",
+    "directory": "packages/react-legacy"
+  },
+  "dependencies": {
+    "react-dom": "^17.0.0",
+    "@atomic-testing/dom-core": "0.73.0",
+    "@atomic-testing/core": "0.73.0",
+    "@atomic-testing/react-core": "0.73.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "peerDependencies": {
+    "@testing-library/dom": ">=9.2.0",
+    "@testing-library/react": ">=12.0.0",
+    "@testing-library/user-event": ">=14.0.0",
+    "react": "^16 || ^17",
+    "react-dom": "^16 || ^17"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check:type": "tsc --noEmit"
+  }
+}

package/src/createTestEngine.ts

@@ -0,0 +1,88 @@
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import { byAttribute, ScenePart, TestEngine } from '@atomic-testing/core';
+import { ReactInteractor } from '@atomic-testing/react-core';
+
+import { IReactTestEngineOption } from './types';
+
+let _rootId = 0;
+function getNextRootElementId() {
+  return `${_rootId++}`;
+}
+
+const rootElementAttributeName = 'data-atomic-testing-react-legacy';
+
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes a react node and render it into a container element.  For rendered
+ * components, use createRenderedLegacyTestEngine
+ * @param node The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+export function createTestEngine<T extends ScenePart>(
+  node: JSX.Element,
+  partDefinitions: T,
+  option?: Readonly<Partial<IReactTestEngineOption>>
+): TestEngine<T> {
+  const rootEl = option?.rootElement ?? document.body;
+  const container = rootEl.appendChild(document.createElement('div'));
+  const rootId = getNextRootElementId();
+  container.setAttribute(rootElementAttributeName, rootId);
+
+  act(() => {
+    ReactDOM.render(node, container);
+  });
+  const cleanup = () => {
+    ReactDOM.unmountComponentAtNode(container);
+    rootEl.removeChild(container);
+    return Promise.resolve();
+  };
+
+  const engine = new TestEngine(
+    byAttribute(rootElementAttributeName, rootId),
+    new ReactInteractor(),
+    {
+      parts: partDefinitions,
+    },
+    cleanup
+  );
+
+  return engine;
+}
+
+/**
+ * Create test engine for React 17 or before, for React 18 or later, use @atomic-testing/react-18 or @atomic-testing/react-19
+ * This function takes an html element purportedly rendered by React and create a test engine for it, it
+ * can be useful in environment such as Storybook where Storybook renders the component and the test
+ * @param rootElement The React node to render
+ * @param partDefinitions The scene part definitions
+ * @param option
+ * @returns The test engine
+ */
+export function createRenderedTestEngine<T extends ScenePart>(
+  rootElement: HTMLElement,
+  partDefinitions: T,
+  _option?: Readonly<Partial<IReactTestEngineOption>>
+): TestEngine<T> {
+  const rootId = getNextRootElementId();
+  rootElement.setAttribute(rootElementAttributeName, rootId);
+
+  const cleanup = () => {
+    rootElement.removeAttribute(rootElementAttributeName);
+    return Promise.resolve();
+  };
+
+  const engine = new TestEngine(
+    byAttribute(rootElementAttributeName, rootId),
+    new ReactInteractor(),
+    {
+      parts: partDefinitions,
+    },
+    cleanup
+  );
+
+  return engine;
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { createTestEngine, createRenderedTestEngine } from './createTestEngine';
+export type { IReactTestEngineOption } from './types';

package/src/types.ts

@@ -0,0 +1,5 @@
+import { IComponentDriverOption } from '@atomic-testing/core';
+
+export interface IReactTestEngineOption extends IComponentDriverOption {
+  rootElement?: Element;
+}