Unit Test Support example

unit-test/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

unit-test/README.md

@@ -0,0 +1,21 @@
+# Rsbuild / Create React App Example
+
+This example demos a basic host application loading remote component.
+
+- `host` is the host application (unit_test-based).
+- `remote` standalone application (unit_test-based) which exposes `Button` component.
+
+# Running Demo
+
+Run `pnpm run start`. This will build and serve both `host` and `remote` on ports 3001 and 3002 respectively.
+
+- [localhost:3001](http://localhost:3000/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)

unit-test/cypress.env.json

@@ -0,0 +1,4 @@
+{
+  "allure": true,
+  "allureResultsPath": "../cypress-e2e/results/allure-results"
+}

unit-test/e2e/checkCraApps.cy.ts

@@ -0,0 +1,45 @@
+import { baseSelectors } from './../../cypress-e2e/common/selectors';
+import { BaseMethods } from '../../cypress-e2e/common/base';
+import { Constants } from '../../cypress-e2e/fixtures/constants';
+
+const basePage: BaseMethods = new BaseMethods();
+
+const appsData = [
+  {
+    appNameText: Constants.commonConstantsData.basicComponents.host,
+    host: 3000,
+  },
+  {
+    appNameText: Constants.commonConstantsData.basicComponents.remote,
+    host: 3002,
+  },
+];
+
+appsData.forEach((property: { appNameText: string; host: number }) => {
+  const appName = property.host === 3000 ? appsData[0].appNameText : appsData[1].appNameText;
+
+  describe('CRA', () => {
+    context(`Check ${appName}`, () => {
+      beforeEach(() => {
+        basePage.openLocalhost({
+          number: property.host,
+        });
+      });
+
+      it(`Check ${appName} elements exist on the page`, () => {
+        basePage.checkElementWithTextPresence({
+          selector: baseSelectors.tags.headers.h1,
+          text: Constants.commonConstantsData.basicComponents.basicHostRemote,
+        });
+        basePage.checkElementWithTextPresence({
+          selector: baseSelectors.tags.headers.h2,
+          text: property.appNameText,
+        });
+        basePage.checkElementWithTextPresence({
+          selector: baseSelectors.tags.coreElements.button,
+          text: Constants.elementsText.craApp.buttonText,
+        });
+      });
+    });
+  });
+});

unit-test/host/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }

unit-test/host/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

unit-test/host/__tests__/app.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import App from '@src/App.js';
+
+describe('App Component', () => {
+  beforeAll(async ()=>{
+    await require('federation-test')
+  });
+  test('renders the main heading', () => {
+    render(<App />);
+    const mainHeading = screen.getByTestId('main-heading');
+    expect(mainHeading).toBeInTheDocument();
+  });
+
+  test('renders the subheading', () => {
+    render(<App />);
+    const subHeading = screen.getByTestId('sub-heading');
+    expect(subHeading).toBeInTheDocument();
+  });
+
+  test('renders the RemoteButton with fallback', async () => {
+    render(<App />);
+    const remoteButton = await screen.findByTestId('remote-button');
+    expect(remoteButton).toBeInTheDocument();
+  });
+});

unit-test/host/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    moduleNameMapper: {
+      '^@src/(.*)$': '<rootDir>/src/$1'
+    },
+    testEnvironment: 'jsdom',
+    transform: {
+      '^.+\\.jsx?$': 'babel-jest'
+    },
+    setupFiles: ['<rootDir>/jest.setup.js']
+  };

unit-test/host/jest.setup.js

@@ -0,0 +1,5 @@
+const { setupFederationTest } = require('../mf-test');
+
+module.exports = async () => {
+  await setupFederationTest(require('./modulefederation.config'));
+};

unit-test/host/modulefederation.config.js

@@ -0,0 +1,21 @@
+const { dependencies } = require('./package.json');
+
+module.exports = {
+  name: 'host',
+  library: {type: 'commonjs-module', name: 'host'},
+  remoteType: 'script',
+  remotes: {
+    remote: 'remote@http://localhost:3002/remoteEntry.js',
+  },
+  shared: {
+    ...dependencies,
+    react: {
+      singleton: true,
+      requiredVersion: dependencies['react'],
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: dependencies['react-dom'],
+    },
+  },
+};

unit-test/host/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "unit_test_host",
+  "version": "0.0.0",
+  "dependencies": {
+    "deasync": "^0.1.29",
+    "fibers": "^5.0.3",
+    "future": "^2.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "sync-promise": "^1.1.0"
+  },
+  "scripts": {
+    "start": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview",
+    "test": "jest"
+  },
+  "eslintConfig": {},
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@module-federation/enhanced": "^0.1.13",
+    "@module-federation/runtime": "^0.1.13",
+    "@rsbuild/core": "0.6.15",
+    "@rsbuild/plugin-react": "0.6.15",
+    "@rspack/core": "0.6.5",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "node-fetch": "2.6.9"
+  }
+}

unit-test/host/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Host</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

unit-test/host/rsbuild.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import {ModuleFederationPlugin} from '@module-federation/enhanced/rspack'
+//@ts-ignore
+import mfConfig from './modulefederation.config';
+import rspack from '@rspack/core';
+
+const rsbuildPlugin = () => ({
+  name: 'example',
+  setup(api) {
+    api.onAfterBuild(() => console.log('done'));
+  },
+});
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  output: {
+    targets: ['node'],
+  },
+  plugins: [pluginReact()],
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      appendPlugins([
+        new ModuleFederationPlugin(mfConfig),
+      ]);
+    },
+  },
+});

unit-test/host/scripts/build.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = 'production';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/build');

unit-test/host/scripts/overrides/webpack-config.js

@@ -0,0 +1,16 @@
+const { ModuleFederationPlugin } = require('webpack').container;
+
+const webpackConfigPath = 'react-scripts/config/webpack.config';
+const webpackConfig = require(webpackConfigPath);
+
+const override = config => {
+  config.plugins.push(new ModuleFederationPlugin(require('../../modulefederation.config.js')));
+
+  config.output.publicPath = 'auto';
+
+  return config;
+};
+
+require.cache[require.resolve(webpackConfigPath)].exports = env => override(webpackConfig(env));
+
+module.exports = require(webpackConfigPath);

unit-test/host/scripts/start.js

@@ -0,0 +1,3 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+require('./overrides/webpack-config');
+require('react-scripts/scripts/start');

unit-test/host/src/App.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import RemoteButton from 'remote/Button'
+// const RemoteButton = React.lazy(() => import('remote/Button'));
+
+const App = () => (
+  <div>
+    <h1 data-testid="main-heading">Basic Host-Remote</h1>
+    <h2 data-testid="sub-heading">Host</h2>
+    <React.Suspense fallback={<span data-testid="loading-fallback">Loading Button</span>}>
+      <RemoteButton data-testid="remote-button" />
+    </React.Suspense>
+  </div>
+);
+
+export default App;

unit-test/host/src/bootstrap.js

@@ -0,0 +1,11 @@
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+//
+// import App from './App';
+//
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>,
+//   // document.getElementById('root'),
+// );

unit-test/host/src/index.js

@@ -0,0 +1 @@
+import('./bootstrap');

unit-test/host/thing.js

@@ -0,0 +1 @@
+require('./jest.setup')()