Merge branch 'dev'

__tests__/shared/components/Button.tsx

@@ -3,7 +3,7 @@
 import { noop, omit } from 'lodash';
 import Button from 'components/Button';
 import { snapshot } from 'utils/jest';
-import { StaticRouter } from 'react-router-dom/server';
+import { StaticRouter } from 'react-router';
 
 const testTheme = {
   active: 'ACTIVE_CLASS',
@@ -48,13 +48,7 @@ describe('Matches snapshots', () => {
   });
   test('when rendered as link', () => {
     snapshot((
-      <StaticRouter
-        future={{
-          v7_relativeSplatPath: true,
-          v7_startTransition: true,
-        }}
-        location=""
-      >
+      <StaticRouter location="">
         <Button
           active
           theme={testTheme}

__tests__/shared/components/GenericLink.tsx

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import UserEvents from '@testing-library/user-event';
 

__tests__/shared/components/Link.tsx

@@ -1,18 +1,13 @@
 /** @jest-environment jsdom */
 
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 import Link from 'components/Link';
 import { snapshot } from 'utils/jest';
 
 test('Matches snapshots', () => {
   snapshot(
-    <MemoryRouter
-      future={{
-        v7_relativeSplatPath: true,
-        v7_startTransition: true,
-      }}
-    >
+    <MemoryRouter>
       <Link to="" />
     </MemoryRouter>,
   );

__tests__/shared/components/NavLink/index.tsx

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 import NavLink from 'components/NavLink';
 
@@ -10,22 +10,12 @@ import './styles.scss';
 
 test('Matches snapshots', () => {
   snapshot(
-    <MemoryRouter
-      future={{
-        v7_relativeSplatPath: true,
-        v7_startTransition: true,
-      }}
-    >
+    <MemoryRouter>
       <NavLink to="" />
     </MemoryRouter>,
   );
   snapshot(
-    <MemoryRouter
-      future={{
-        v7_relativeSplatPath: true,
-        v7_startTransition: true,
-      }}
-    >
+    <MemoryRouter>
       <NavLink styleName="navLink" to="" />
     </MemoryRouter>,
   );

__tests__/shared/components/__snapshots__/GenericLink.tsx.snap

@@ -37,7 +37,7 @@ exports[`Relative link 1`] = `
 <button
   type="button"
 >
-  {"to":"http/relative/link","children":"RELATIVE LINK"}
+  {"discover":"none","to":"http/relative/link","children":"RELATIVE LINK"}
 </button>
 `;
 

__tests__/shared/utils/splitComponent/__assets__/RoutingScene/InnerRouter.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 const Component = () => <div>Hello World!</div>;
 

__tests__/shared/utils/splitComponent/__assets__/RoutingScene/RoutingScene.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import splitComponent from 'utils/splitComponent';
 
 // Note: this is not exactly how splitComponent() should be used to actually

__tests__/shared/utils/splitComponent/__assets__/SampleScene/ComponentA/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type ReactNode } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 import { type ForceT, useGlobalState } from '@dr.pogodin/react-global-state';
 
 import './style.scss';

__tests__/shared/utils/splitComponent/__assets__/SampleScene/ComponentB/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type ReactNode } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import { type ForceT, useGlobalState } from '@dr.pogodin/react-global-state';
 

__tests__/shared/utils/splitComponent/__assets__/SampleScene/ComponentC/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import { type ReactNode } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router';
 
 import { type ForceT, useGlobalState } from '@dr.pogodin/react-global-state';
 

config/jest/resolver.js

@@ -1,10 +1,12 @@
 module.exports = (path, options) => {
+  const ops = { ...options };
+
   // Appending "development" option we ensure that Jest tests use development
   // version of the library's build for browsers, which for example contains
   // "data-testid" attributes (they are optimized-out of production builds).
-  if (options.conditions && !options.conditions.includes('development')) {
-    options.conditions.push('development');
+  if (ops.conditions && !ops.conditions.includes('development')) {
+    ops.conditions = [...ops.conditions, 'development'];
   }
 
-  return options.defaultResolver(path, { ...options });
+  return options.defaultResolver(path, ops);
 };

config/jest/setup.js

@@ -1,3 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable global-require, import/no-extraneous-dependencies */
+/* global globalThis */
 
 import 'raf/polyfill';
+
+// TODO: This is a temporary polyfill necessary for react-router,
+// as JSDom does not provide TextEncoder, see:
+// https://github.com/remix-run/react-router/issues/12363
+if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
+  const { TextDecoder, TextEncoder } = require('node:util');
+  globalThis.TextEncoder = TextEncoder;
+  globalThis.TextDecoder = TextDecoder;
+}