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;
  });

vinnymac

// Before
import { waitForNextUpdate, renderHook } from '@testing-library/react-hooks';

// After
import { waitFor, renderHook } from '@testing-library/react';

vinnymac

// React 17 or lower
type DropdownProps = {
  open: boolean;
}

// React 18 or higher
type DropdownProps = {
  open: boolean;
  children?: React.ReactNode;
}

vinnymac

import { ReactElement, useLayoutEffect, useRef } from 'react';

export function AppWithCallbackAfterRender({
  children,
  callback,
}: {
  children: ReactElement;
  callback: () => void;
}): ReactElement {
  const onlyOnce = useRef(false);