vinnymac

"dependencies": {
-    "@hot-loader/react-dom": "^17.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
-    "react-redux": "^7.2.4",
+    "react-redux": "^8.0.5",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.4.2",

vinnymac

TypeError: Cannot read property 'useMemo' of null

vinnymac

TypeError: Cannot read property 'useState' of null

vinnymac

# Install React 18 in the workspace
yarn add react@^18.2.0 react-dom@^18.2.0 -W

# Install react 18 type definitions in the workspace
yarn add -D @types/react@^18.0.24 @types/react-dom@^18.0.8 -W

vinnymac

import { flushSync } from 'react-dom';

flushSync(() => {
  currentEl.focus();
  setFocused(false);
});

vinnymac

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'

import { Account } from './Account';
import { ErrorBoundary } from './ErrorBoundary';

describe('Account', () => {
  it('renders a fallback when an account error is thrown', async () => {
    const fallback = jest.fn(() => (

vinnymac

export function ignoreReact18DOMrenderWarning() {
  const originalError = console.error;

  beforeAll(() => {
    console.error = (...args) => {
      if (/Warning: ReactDOM.render is no longer supported in React 18./.test(args[0])) {
        return;
      }
      originalError.call(console, ...args);
    };

vinnymac

import React from 'react';
import { render } from '@testing-library/react';

import AutoRedirect from './AutoRedirect';
import { mockWindowLocation } from './testUtils';

describe('Navigation', () => {
  mockWindowLocation();
  it('navigates to seatgeek', () => {
    render(<AutoRedirect />);

vinnymac

// Jest 26 with latest JSDOM prevents location from being proxied
// Instead we can redefine location on window, and then restore.
export function mockWindowLocation(
  mockLocation: Partial<Location> = {
    href: '',
    assign: jest.fn(),
    reload: jest.fn(),
  }
) {
  const savedLocation = window.location;

vinnymac

function getGlobalThis() {
  return global || globalThis || self || window;
}

export function disableReactActEnv() {
  let prev: boolean;
  beforeEach(() => {
    prev = getGlobalThis().IS_REACT_ACT_ENVIRONMENT;
    getGlobalThis().IS_REACT_ACT_ENVIRONMENT = false;
  });