e2e: introduce custom mount which runs cypress component tests in React Strict mode by default (#35134)

Author: Hotell

apps/react-17-tests-v9/config/cypressWithStrictMode.ts

@@ -5,7 +5,7 @@ const { join } = require('node:path');
 
 /**
  *
- * @returns {string} The path to the node_modules directory used by the project
+ * @returns {{ usedNodeModulesPath: string, workspaceRootNodeModulesPath: string }} The path to the node_modules directory used by the project
  */
 function getNodeModulesPath() {
   const projectRoot = join(__dirname, '..');
@@ -22,7 +22,7 @@ function getNodeModulesPath() {
   console.log('Using React from:', reactPath);
   console.log('Using ReactDOM from:', reactDomPath);
 
-  return usedNodeModulesPath;
+  return { usedNodeModulesPath, workspaceRootNodeModulesPath: rootNodeModulesPath };
 }
 
 module.exports = {

apps/react-17-tests-v9/config/utils.js

@@ -16,10 +16,5 @@ const specs = [
 const config = { ...baseConfig };
 
 config.component.specPattern = specs;
-config.component.devServer.webpackConfig.resolve ??= {};
-config.component.devServer.webpackConfig.resolve.alias = {
-  ...config.component.devServer.webpackConfig.resolve.alias,
-  '@cypress/react': path.resolve(__dirname, './config/cypressWithStrictMode.ts'),
-};
 
 export default config;

apps/react-17-tests-v9/cypress-react-17.config.ts

@@ -3,7 +3,7 @@ import { baseConfig } from '@fluentui/scripts-cypress';
 
 import { getNodeModulesPath } from './config/utils';
 
-const usedNodeModulesPath = getNodeModulesPath();
+const { usedNodeModulesPath } = getNodeModulesPath();
 
 const config = { ...baseConfig };
 

apps/react-17-tests-v9/cypress.config.ts

@@ -6,8 +6,7 @@ const { join } = require('node:path');
 
 const { getNodeModulesPath } = require('./config/utils');
 
-const usedNodeModulesPath = getNodeModulesPath();
-const workspacePresetNodeModulesPath = join(__dirname, '../../node_modules');
+const { usedNodeModulesPath, workspaceRootNodeModulesPath } = getNodeModulesPath();
 
 // Reading the SWC compilation config and remove the "exclude"
 // for the test files to be compiled by SWC
@@ -42,7 +41,7 @@ module.exports = {
     '^react-test-renderer$': join(usedNodeModulesPath, './react-test-renderer'),
     '^@testing-library/(react|dom)$': join(usedNodeModulesPath, './@testing-library/$1'),
     // need to remap to monorepo root as react-hooks is hoisted
-    '^@testing-library/react-hooks$': join(workspacePresetNodeModulesPath, './@testing-library/react-hooks'),
+    '^@testing-library/react-hooks$': join(workspaceRootNodeModulesPath, './@testing-library/react-hooks'),
   },
   transform: {
     '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],

apps/react-17-tests-v9/jest.config.js

@@ -6,7 +6,7 @@ const { getNodeModulesPath } = require('./config/utils');
 
 preset();
 
-const usedNodeModulesPath: string = getNodeModulesPath();
+const { usedNodeModulesPath } = getNodeModulesPath();
 
 task('type-check', () =>
   typeCheckWithConfigOverride(config => {

apps/react-17-tests-v9/just.config.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount as mountBase } from '@cypress/react';
+import { mount as mountBase } from '@fluentui/scripts-cypress';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
 
 import { Provider } from '../Provider/Provider';

apps/react-17-tests-v9/src/components/Menu/Menu.cy.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from '@cypress/react';
+import { mount } from '@fluentui/scripts-cypress';
 import { Button } from '@fluentui/react-components';
 
 import { Provider } from './Provider';

apps/react-17-tests-v9/src/components/Provider/Provider.cy.tsx

@@ -5,7 +5,7 @@ const { join } = require('node:path');
 
 /**
  *
- * @returns {string} The path to the node_modules directory used by the project
+ * @returns {{ usedNodeModulesPath: string, workspaceRootNodeModulesPath: string }} The path to the node_modules directory used by the project
  */
 function getNodeModulesPath() {
   const projectRoot = join(__dirname, '..');
@@ -22,7 +22,7 @@ function getNodeModulesPath() {
   console.log('Using React from:', reactPath);
   console.log('Using ReactDOM from:', reactDomPath);
 
-  return usedNodeModulesPath;
+  return { usedNodeModulesPath, workspaceRootNodeModulesPath: rootNodeModulesPath };
 }
 
 module.exports = {

apps/react-18-tests-v8/config/utils.js

@@ -4,7 +4,7 @@ import { registerTsPaths } from '@fluentui/scripts-storybook';
 
 import { getNodeModulesPath } from './config/utils';
 
-const usedNodeModulesPath = getNodeModulesPath();
+const { usedNodeModulesPath } = getNodeModulesPath();
 
 const tsConfigPath = path.resolve(__dirname, '../../tsconfig.base.v8.json');