Unit Test Support example

Author: ScriptedAlchemy

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'],
+    },
+  },
+};