From react19-upgrade
Provides before/after patterns for migrating React test files to React 19 compatibility, fixing act() imports from 'react', Simulate to fireEvent, StrictMode call counts, and test-utils cleanup.
npx claudepluginhub passelin/marketplace-test --plugin react19-upgradeThis skill uses the workspace's default tool permissions.
Reference for all test file migrations required by React 19.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Reference for all test file migrations required by React 19.
Fix test files in this order; each layer depends on the previous:
act import fix first, it unblocks everything elseSimulate → fireEvent fix immediately after act// Before REMOVED in React 19:
import { act } from 'react-dom/test-utils';
// After:
import { act } from 'react';
If mixed with other test-utils imports:
// Before:
import { act, Simulate, renderIntoDocument } from 'react-dom/test-utils';
// After split the imports:
import { act } from 'react';
import { fireEvent, render } from '@testing-library/react'; // replaces Simulate + renderIntoDocument
// Before Simulate REMOVED in React 19:
import { Simulate } from 'react-dom/test-utils';
Simulate.click(element);
Simulate.change(input, { target: { value: 'hello' } });
Simulate.submit(form);
Simulate.keyDown(element, { key: 'Enter', keyCode: 13 });
// After:
import { fireEvent } from '@testing-library/react';
fireEvent.click(element);
fireEvent.change(input, { target: { value: 'hello' } });
fireEvent.submit(form);
fireEvent.keyDown(element, { key: 'Enter', keyCode: 13 });
| Old (react-dom/test-utils) | New location |
|---|---|
act | import { act } from 'react' |
Simulate | fireEvent from @testing-library/react |
renderIntoDocument | render from @testing-library/react |
findRenderedDOMComponentWithTag | getByRole, getByTestId from RTL |
findRenderedDOMComponentWithClass | getByRole or container.querySelector |
scryRenderedDOMComponentsWithTag | getAllByRole from RTL |
isElement, isCompositeComponent | Remove not needed with RTL |
isDOMComponent | Remove |
React 19 StrictMode no longer double-invokes useEffect in development. Spy assertions counting effect calls must be updated.
Strategy always measure, never guess:
# Run the failing test, read the actual count from the error:
npm test -- --watchAll=false --testPathPattern="[filename]" --forceExit 2>&1 | grep -E "Expected|Received"
// Before (React 18 StrictMode effects ran twice):
expect(mockFn).toHaveBeenCalledTimes(2); // 1 call × 2 (strict double-invoke)
// After (React 19 StrictMode effects run once):
expect(mockFn).toHaveBeenCalledTimes(1);
// Render-phase calls (component body) still double-invoked in React 19 StrictMode:
expect(renderSpy).toHaveBeenCalledTimes(2); // stays at 2 for render body calls