vinnymac

Instructions

1. Open the browser of your choice
2. Visit https://playstation.com (and sign out if you are signed in)
3. Open the developer tools for your browser, and click on the network activity tab
4. Choose to preserve the network log on the network tab

5. Now sign back into the playstation site
6. Search the network activity for requests named id, and click on one of them

vinnymac

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

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

vinnymac

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

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

vinnymac

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

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

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

// 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

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

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, 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

import { flushSync } from 'react-dom';

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