ref(js): Remove react-router from rr6 hook tests (#76492)

These hooks are supposed to quack like react-router 6 hooks. We can test hat (sort of) without using react-router.
getsentry · Aug 29, 2024 · 6a851df · 6a851df
1 parent 38e4f4d
commit 6a851df
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 164 deletions.
diff --git a/static/app/utils/useLocation.spec.tsx b/static/app/utils/useLocation.spec.tsx
@@ -1,7 +1,9 @@
-import {createMemoryHistory, Route, Router, RouterContext} from 'react-router';
+import {LocationFixture} from 'sentry-fixture/locationFixture';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {render} from 'sentry-test/reactTestingLibrary';
 
+import type {RouteContextInterface} from 'sentry/types/legacyReactRouter';
 import {useLocation} from 'sentry/utils/useLocation';
 import {RouteContext} from 'sentry/views/routeContext';
 
@@ -13,25 +15,23 @@ describe('useLocation', () => {
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/?hello');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture({
+ query: {hello: null},
+ search: '?hello',
+ }),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/" component={HomePage} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
 
- expect(location.pathname).toBe('/');
+ expect(location.pathname).toBe('/mock-pathname/');
  expect(location.query).toEqual({hello: null});
  expect(location.search).toBe('?hello');
  });

diff --git a/static/app/utils/useNavigate.spec.tsx b/static/app/utils/useNavigate.spec.tsx
@@ -1,9 +1,11 @@
 import {useEffect} from 'react';
-import {createMemoryHistory, Route, Router, RouterContext} from 'react-router';
+import {LocationFixture} from 'sentry-fixture/locationFixture';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {render} from 'sentry-test/reactTestingLibrary';
 
 import ConfigStore from 'sentry/stores/configStore';
+import type {RouteContextInterface} from 'sentry/types/legacyReactRouter';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {RouteContext} from 'sentry/views/routeContext';
 
@@ -22,22 +24,17 @@ describe('useNavigate', () => {
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/" component={HomePage} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
 
  expect(typeof navigate).toBe('function');
@@ -59,29 +56,22 @@ describe('useNavigate', () => {
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/" component={HomePage} />
- <Route
- path="/issues"
- component={() => {
- return null;
- }}
- />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
- expect(memoryHistory.getCurrentLocation().pathname).toBe('/issues/');
+
+ expect(routeContext.router.push).toHaveBeenCalledWith({
+ pathname: '/issues/',
+ state: undefined,
+ });
  });
 });
diff --git a/static/app/utils/useParams.spec.tsx b/static/app/utils/useParams.spec.tsx
@@ -1,7 +1,9 @@
-import {createMemoryHistory, Route, Router, RouterContext} from 'react-router';
+import {LocationFixture} from 'sentry-fixture/locationFixture';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
+import type {RouteContextInterface} from 'sentry/types/legacyReactRouter';
 import {useParams} from 'sentry/utils/useParams';
 import {useRouteContext} from 'sentry/utils/useRouteContext';
 import {RouteContext} from 'sentry/views/routeContext';
@@ -33,22 +35,17 @@ describe('useParams', () => {
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/?hello');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/" component={HomePage} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
 
  expect(params).toEqual({});
@@ -63,22 +60,17 @@ describe('useParams', () => {
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/sentry');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {slug: 'sentry'},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/:slug" component={HomePage} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
  expect(params).toEqual({slug: 'sentry'});
  });
@@ -105,22 +97,17 @@ describe('useParams', () => {
  );
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/issues/?hello');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/issues/" component={Component} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <Component />
+ </RouteContext.Provider>
  );
 
  expect(
@@ -148,22 +135,17 @@ describe('useParams', () => {
  );
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/issues/?hello');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/issues/" component={Component} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <Component />
+ </RouteContext.Provider>
  );
 
  expect(

diff --git a/static/app/utils/useRouter.spec.tsx b/static/app/utils/useRouter.spec.tsx
@@ -1,58 +1,48 @@
-import {createMemoryHistory, Route, Router, RouterContext} from 'react-router';
+import {LocationFixture} from 'sentry-fixture/locationFixture';
+import {RouterFixture} from 'sentry-fixture/routerFixture';
 
 import {render} from 'sentry-test/reactTestingLibrary';
 
+import type {RouteContextInterface} from 'sentry/types/legacyReactRouter';
 import useRouter from 'sentry/utils/useRouter';
 import {RouteContext} from 'sentry/views/routeContext';
 
 describe('useRouter', () => {
  it('returns the current router object', function () {
- let expectedRouter;
  let actualRouter;
  function HomePage() {
  actualRouter = useRouter();
  return null;
  }
 
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/');
+ const routeContext: RouteContextInterface = {
+ location: LocationFixture(),
+ params: {},
+ router: RouterFixture(),
+ routes: [],
+ };
 
  render(
- <Router
- history={memoryHistory}
- render={props => {
- expectedRouter = props.router;
- return (
- <RouteContext.Provider value={props}>
- <RouterContext {...props} />
- </RouteContext.Provider>
- );
- }}
- >
- <Route path="/" component={HomePage} />
- </Router>
+ <RouteContext.Provider value={routeContext}>
+ <HomePage />
+ </RouteContext.Provider>
  );
- expect(actualRouter).toEqual(expectedRouter);
+ expect(actualRouter).toEqual(routeContext.router);
  });
 
  it('throws error when called outside of routes provider', function () {
  // Error is expected, do not fail when calling console.error
  jest.spyOn(console, 'error').mockImplementation();
- const memoryHistory = createMemoryHistory();
- memoryHistory.push('/');
+
+ function HomePage() {
+ useRouter();
+ return null;
+ }
 
  expect(() =>
  render(
  <RouteContext.Provider value={null}>
- <Router history={memoryHistory}>
- <Route
- path="/"
- component={() => {
- useRouter();
- return null;
- }}
- />
- </Router>
+ <HomePage />
  </RouteContext.Provider>
  )
  ).toThrow(/useRouteContext called outside of routes provider/);