graphiql 5: run cypress tests in React strict mode (#4020)

* run cypress tests in React strict mode

* upd

* upd

* upd

* Update packages/graphiql/cypress/e2e/tabs.cy.ts

Author: dimaMachina

.changeset/gorgeous-lobsters-run.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': patch
+---
+
+- run cypress tests in React strict mode
+- fix `defaultQuery` with empty string does not result in an empty default query
+- fix `useDidUpdate` in React strict mode 

packages/graphiql-react/src/components/provider.tsx

@@ -145,7 +145,7 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
 
       const { tabs, activeTabIndex } = getDefaultTabState({
         defaultHeaders,
-        defaultQuery: defaultQuery || DEFAULT_QUERY,
+        defaultQuery: defaultQuery ?? DEFAULT_QUERY,
         defaultTabs,
         headers,
         query,

packages/graphiql-react/src/utility/hooks.ts

@@ -173,14 +173,21 @@ export function useOptimisticState([
   return [state, setState];
 }
 
-export const useDidUpdate: typeof useEffect = (callback, dependencies) => {
+// https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/src/use-did-update/use-did-update.ts
+export const useDidUpdate: typeof useEffect = (fn, dependencies) => {
   const didMountRef = useRef(false);
 
+  // React Strict Mode intentionally mounts → unmounts → mounts the component during development.
   useEffect(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
+    return () => {
+      didMountRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (didMountRef.current) {
+      return fn();
     }
-    callback();
+    didMountRef.current = true;
   }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
 };

packages/graphiql/cypress/e2e/headers.cy.ts

@@ -3,9 +3,7 @@ const DEFAULT_HEADERS = '{"foo":2}';
 describe('Headers', () => {
   describe('`defaultHeaders`', () => {
     it('should have default headers while open new tabs', () => {
-      cy.visit(
-        `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&defaultQuery=`,
-      );
+      cy.visit(`?query={test}&defaultHeaders=${DEFAULT_HEADERS}`);
       cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS });
       cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
@@ -16,7 +14,7 @@ describe('Headers', () => {
     it('in case `headers` and `defaultHeaders` are set, `headers` should be on 1st tab and `defaultHeaders` for other opened tabs', () => {
       const HEADERS = '{"bar":true}';
       cy.visit(
-        `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}&defaultQuery=`,
+        `?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}`,
       );
       cy.assertHasValues({ query: '{test}', headersString: HEADERS });
       cy.get('.graphiql-tab-add').click();

packages/graphiql/cypress/e2e/history.cy.ts

@@ -15,14 +15,14 @@ describe('history', () => {
   });
 
   it('will save history item even when history panel is closed', () => {
-    cy.visit('/?query={test}');
+    cy.visit('?query={test}');
     cy.clickExecuteQuery();
     cy.get('button[aria-label="Show History"]').click();
     cy.get('ul.graphiql-history-items').should('have.length', 1);
   });
 
   it('will save history item even when history panel is closed', () => {
-    cy.visit('/?query={test}');
+    cy.visit('?query={test}');
     cy.clickExecuteQuery();
     cy.get('button[aria-label="Show History"]').click();
     cy.get('ul.graphiql-history-items li').should('have.length', 1);

packages/graphiql/cypress/e2e/prettify.cy.ts

@@ -29,7 +29,7 @@ describeOrSkip('GraphiQL Prettify', () => {
   it('should work while click on prettify button', () => {
     const rawQuery = '{  test\n\nid  }';
     const resultQuery = '{ test id }';
-    cy.visit(`/?query=${rawQuery}&onPrettifyQuery=true`);
+    cy.visit(`?query=${rawQuery}&onPrettifyQuery=true`);
     cy.clickPrettify();
     cy.assertHasValues({ query: resultQuery });
   });

packages/graphiql/cypress/e2e/tabs.cy.ts

@@ -1,15 +1,16 @@
 describe('Tabs', () => {
   it('Should store editor contents when switching between tabs', () => {
-    cy.visit('/?defaultQuery=&query=');
+    cy.visit('?defaultQuery=');
 
     // Assert that tab visible when there's only one session
     cy.get('.graphiql-tab-button').eq(0).should('exist');
-
     // Enter a query without operation name
     cy.get('.graphiql-query-editor textarea').type('{id', { force: true });
 
     // Run the query
     cy.clickExecuteQuery();
+    // Assert request is not cancelled
+    cy.get('.result-window').should('not.have.text', '');
 
     // Open a new tab
     cy.get('.graphiql-tab-add').click();
@@ -33,7 +34,8 @@ describe('Tabs', () => {
 
     // Run the query
     cy.clickExecuteQuery();
-
+    // Assert request is not cancelled
+    cy.get('.result-window').should('not.have.text', '');
     // Switch back to the first tab
     cy.get('.graphiql-tab-button').eq(0).click();
 
@@ -82,7 +84,7 @@ describe('Tabs', () => {
   describe('confirmCloseTab()', () => {
     it('should keep tab when `Cancel` was clicked', () => {
       cy.on('window:confirm', () => false);
-      cy.visit('/?confirmCloseTab=true');
+      cy.visit('?confirmCloseTab=true');
 
       cy.get('.graphiql-tab-add').click();
 
@@ -93,7 +95,7 @@ describe('Tabs', () => {
 
     it('should close tab when `OK` was clicked', () => {
       cy.on('window:confirm', () => true);
-      cy.visit('/?confirmCloseTab=true');
+      cy.visit('?confirmCloseTab=true');
 
       cy.get('.graphiql-tab-add').click();
 

packages/graphiql/cypress/e2e/theme.cy.ts

@@ -1,17 +1,17 @@
 describe('Theme', () => {
   describe('`forcedTheme`', () => {
     it('Switches to light theme when `forcedTheme` is light', () => {
-      cy.visit('/?forcedTheme=light');
+      cy.visit('?forcedTheme=light');
       cy.get('body').should('have.class', 'graphiql-light');
     });
 
     it('Switches to dark theme when `forcedTheme` is dark', () => {
-      cy.visit('/?forcedTheme=dark');
+      cy.visit('?forcedTheme=dark');
       cy.get('body').should('have.class', 'graphiql-dark');
     });
 
     it('Defaults to light theme when `forcedTheme` value is invalid', () => {
-      cy.visit('/?forcedTheme=invalid');
+      cy.visit('?forcedTheme=invalid');
       cy.get('[data-value=settings]').click();
       cy.get('.graphiql-dialog-section-title')
         .eq(1)
@@ -21,11 +21,11 @@ describe('Theme', () => {
 
   describe('`defaultTheme`', () => {
     it('should have light theme', () => {
-      cy.visit('/?defaultTheme=light');
+      cy.visit('?defaultTheme=light');
       cy.get('body').should('have.class', 'graphiql-light');
     });
     it('should have dark theme', () => {
-      cy.visit('/?defaultTheme=dark');
+      cy.visit('?defaultTheme=dark');
       cy.get('body').should('have.class', 'graphiql-dark');
     });
   });

packages/graphiql/src/e2e.ts

@@ -123,8 +123,9 @@ const props: ComponentProps<typeof GraphiQL> = {
 };
 
 root.render(
-  // TODO: enable strict mode after monaco-editor migration
-  // <StrictMode>
-  React.createElement(GraphiQL, props),
-  // </StrictMode>,
+  React.createElement(
+    React.StrictMode,
+    null,
+    React.createElement(GraphiQL, props),
+  ),
 );