Added CypressStrictMode

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.2] - 2022-08-15
+
+- Added CypressStrictMode
+
 ## [0.6.1] - 2022-08-08
 
 - eslint now receives the glob itself

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-starter-kit",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A modern, create-react-app-based, starter kit for React projects",
   "keywords": [
     "react",

src/index.tsx

@@ -1,9 +1,9 @@
-import React from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { createGlobalStyle } from "styled-components";
 import App from "./App";
 import { store } from "./app/store";
+import { CypressStrictMode } from "./infrastructure/CypressStrictMode";
 import "./infrastructure/i18n/init";
 import { OidcProvider } from "./infrastructure/sso/OidcProvider";
 import { Loader } from "./infrastructure/wrappers/WithPageSuspense";
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 root.render(
-  <React.StrictMode>
+  <CypressStrictMode>
     <GlobalStyle />
     <Provider store={store}>
       <OidcProvider>
@@ -36,7 +36,7 @@ root.render(
         </Loader>
       </OidcProvider>
     </Provider>
-  </React.StrictMode>,
+  </CypressStrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

src/infrastructure/CypressStrictMode.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+type Props = { children?: ReactNode };
+
+/**
+ * React StrictMode that disables itself when detected to be running in Cypress
+ */
+export const CypressStrictMode: FunctionComponent<Props> = ({ children }) => {
+  const isInCypress = (window as any).Cypress;
+
+  if (isInCypress) {
+    return <>{children}</>;
+  } else {
+    return <React.StrictMode>{children}</React.StrictMode>;
+  }
+};