test(hooks): Add RTL/react-hooks (#28585)

package.json

@@ -31,6 +31,7 @@
     "@sentry/utils": "6.12.0-beta.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "@types/color": "^3.0.2",
     "@types/compression-webpack-plugin": "^6.0.5",
     "@types/css-minimizer-webpack-plugin": "^3.0.1",

tests/js/sentry-test/reactTestingLibrary.tsx

@@ -50,4 +50,5 @@ const mountWithTheme = (ui: React.ReactElement, options?: ContextRenderOptions)
 };
 
 export * from '@testing-library/react';
+
 export {mountWithTheme};

tests/js/spec/utils/useApi.spec.tsx

@@ -1,54 +1,36 @@
-import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {renderHook} from '@testing-library/react-hooks';
 
 import {Client} from 'app/api';
 import useApi from 'app/utils/useApi';
 
 describe('useApi', function () {
-  let apiInstance: Client;
-
-  type Props = {
-    /**
-     * Test passthrough API clients
-     */
-    api?: Client;
-    /**
-     * Test persistInFlight
-     */
-    persistInFlight?: boolean;
-  };
-
-  const MyComponent: React.FC<Props> = ({api, persistInFlight}) => {
-    apiInstance = useApi({api, persistInFlight});
-    return <div />;
-  };
-
-  it('renders MyComponent with an api prop', function () {
-    mountWithTheme(<MyComponent />);
-
-    expect(apiInstance).toBeInstanceOf(Client);
+  it('provides an api client ', function () {
+    const {result} = renderHook(() => useApi());
+
+    expect(result.current).toBeInstanceOf(Client);
   });
 
-  it('cancels pending API requests when component is unmounted', function () {
-    const {unmount} = mountWithTheme(<MyComponent />);
+  it('cancels pending API requests when unmounted', function () {
+    const {result, unmount} = renderHook(() => useApi());
 
-    jest.spyOn(apiInstance, 'clear');
+    jest.spyOn(result.current, 'clear');
     unmount();
 
-    expect(apiInstance.clear).toHaveBeenCalled();
+    expect(result.current.clear).toHaveBeenCalled();
   });
 
   it('does not cancel inflights when persistInFlight is true', function () {
-    const {unmount} = mountWithTheme(<MyComponent persistInFlight />);
+    const {result, unmount} = renderHook(() => useApi({persistInFlight: true}));
 
-    jest.spyOn(apiInstance, 'clear');
+    jest.spyOn(result.current, 'clear');
     unmount();
 
-    expect(apiInstance.clear).not.toHaveBeenCalled();
+    expect(result.current.clear).not.toHaveBeenCalled();
   });
 
   it('uses pass through API when provided', function () {
     const myClient = new Client();
-    const {unmount} = mountWithTheme(<MyComponent api={myClient} />);
+    const {unmount} = renderHook(() => useApi({api: myClient}));
 
     jest.spyOn(myClient, 'clear');
     unmount();

yarn.lock

@@ -2949,6 +2949,17 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
+"@testing-library/react-hooks@^7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0"
+  integrity sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@types/react" ">=16.9.0"
+    "@types/react-dom" ">=16.9.0"
+    "@types/react-test-renderer" ">=16.9.0"
+    react-error-boundary "^3.1.0"
+
 "@testing-library/react@^12.0.0":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.0.0.tgz#9aeb2264521522ab9b68f519eaf15136148f164a"
@@ -3426,7 +3437,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@>=16", "@types/react-dom@^16 || ^17", "@types/react-dom@~17.0.9":
+"@types/react-dom@*", "@types/react-dom@>=16", "@types/react-dom@>=16.9.0", "@types/react-dom@^16 || ^17", "@types/react-dom@~17.0.9":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
   integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
@@ -3471,6 +3482,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-test-renderer@>=16.9.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
+  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@*":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
@@ -3495,6 +3513,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@>=16.9.0":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"
+  integrity sha512-GzzXCpOthOjXvrAUFQwU/svyxu658cwu00Q9ugujS4qc1zXgLFaO0kS2SLOaMWLt2Jik781yuHCWB7UcYdGAeQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/reflux@0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@types/reflux/-/reflux-0.4.1.tgz#1f91d5ede2172c535107e9f79755bda70234f9c1"
@@ -12712,6 +12739,13 @@ react-element-to-jsx-string@^14.3.2:
     "@base2/pretty-print-object" "1.0.0"
     is-plain-object "3.0.1"
 
+react-error-boundary@^3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.3.tgz#276bfa05de8ac17b863587c9e0647522c25e2a0b"
+  integrity sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"