From e20fea679a98bb5cdeedec84d4adbec0a7096656 Mon Sep 17 00:00:00 2001
From: Mastermindzh <info@rickvanlieshout.com>
Date: Mon, 15 Aug 2022 11:51:40 +0200
Subject: [PATCH] Added CypressStrictMode

---
 CHANGELOG.md                             |  4 ++++
 package.json                             |  2 +-
 src/index.tsx                            |  6 +++---
 src/infrastructure/CypressStrictMode.tsx | 16 ++++++++++++++++
 4 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 src/infrastructure/CypressStrictMode.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1515a63..dd03e53 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package.json b/package.json
index b24c164..a2a7b37 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.tsx b/src/index.tsx
index cba0778..1891be9 100644
--- a/src/index.tsx
+++ b/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
diff --git a/src/infrastructure/CypressStrictMode.tsx b/src/infrastructure/CypressStrictMode.tsx
new file mode 100644
index 0000000..e0149f1
--- /dev/null
+++ b/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>;
+  }
+};