chore(tests): Fix react act warning in tests (#5113)

When running tests, React will throw a warning unless you surround state changes with `act(() => <state change>)`[1]. This does that everywhere necessary to get rid of the warning. [1] https://reactjs.org/docs/test-utils.html#act
getsentry · May 17, 2022 · 33e48ca · 33e48ca
1 parent 66a6b59
commit 33e48ca
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 17 deletions.
diff --git a/packages/react/test/reactrouterv3.test.tsx b/packages/react/test/reactrouterv3.test.tsx
@@ -58,15 +58,19 @@ describe('React Router V3', () => {
     instrumentation(mockStartTransaction);
     render(<Router history={history}>{routes}</Router>);
 
-    history.push('/about');
+    act(() => {
+      history.push('/about');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/about',
       op: 'navigation',
       tags: { from: '/', 'routing.instrumentation': 'react-router-v3' },
     });
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/features',
@@ -87,7 +91,9 @@ describe('React Router V3', () => {
     instrumentation(mockStartTransaction);
     render(<Router history={history}>{routes}</Router>);
 
-    history.replace('hello');
+    act(() => {
+      history.replace('hello');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
   });
 
@@ -98,7 +104,9 @@ describe('React Router V3', () => {
     render(<Router history={history}>{routes}</Router>);
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockFinish).toHaveBeenCalledTimes(1);
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
   });

diff --git a/packages/react/test/reactrouterv4.test.tsx b/packages/react/test/reactrouterv4.test.tsx
@@ -58,15 +58,19 @@ describe('React Router v4', () => {
       </Router>,
     );
 
-    history.push('/about');
+    act(() => {
+      history.push('/about');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/about',
       op: 'navigation',
       tags: { 'routing.instrumentation': 'react-router-v4' },
     });
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/features',
@@ -101,7 +105,9 @@ describe('React Router v4', () => {
       </Router>,
     );
 
-    history.replace('hello');
+    act(() => {
+      history.replace('hello');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
   });
 
@@ -118,7 +124,9 @@ describe('React Router v4', () => {
     );
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockFinish).toHaveBeenCalledTimes(1);
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
   });
@@ -237,15 +245,19 @@ describe('React Router v4', () => {
       </Router>,
     );
 
-    history.push('/organizations/1234/v1/758');
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid/v1/:teamid',
       op: 'navigation',
       tags: { 'routing.instrumentation': 'react-router-v4' },
     });
 
-    history.push('/organizations/1234');
+    act(() => {
+      history.push('/organizations/1234');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid',

diff --git a/packages/react/test/reactrouterv5.test.tsx b/packages/react/test/reactrouterv5.test.tsx
@@ -1,4 +1,4 @@
-import { act,render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { createMemoryHistory } from 'history-4';
 import * as React from 'react';
 import { matchPath, Route, Router, Switch } from 'react-router-5';
@@ -58,15 +58,19 @@ describe('React Router v5', () => {
       </Router>,
     );
 
-    history.push('/about');
+    act(() => {
+      history.push('/about');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/about',
       op: 'navigation',
       tags: { 'routing.instrumentation': 'react-router-v5' },
     });
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/features',
@@ -101,7 +105,9 @@ describe('React Router v5', () => {
       </Router>,
     );
 
-    history.replace('hello');
+    act(() => {
+      history.replace('hello');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
   });
 
@@ -118,7 +124,9 @@ describe('React Router v5', () => {
     );
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
 
-    history.push('/features');
+    act(() => {
+      history.push('/features');
+    });
     expect(mockFinish).toHaveBeenCalledTimes(1);
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
   });
@@ -238,15 +246,19 @@ describe('React Router v5', () => {
       </Router>,
     );
 
-    history.push('/organizations/1234/v1/758');
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid/v1/:teamid',
       op: 'navigation',
       tags: { 'routing.instrumentation': 'react-router-v5' },
     });
 
-    history.push('/organizations/1234');
+    act(() => {
+      history.push('/organizations/1234');
+    });
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid',