Snapshot testing for React Aria Select fails with react-test-renderer

[ihaback]

Provide a general summary of the issue here

When trying to use the out of the box Select example we get errors that are hard to debug. Have me misunderstood how you generate snapshots for this kind of component?

// Select.js
import {
  Button,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  Select,
  SelectValue,
} from "react-aria-components";

export const AriaSelect = () => {
  return (
    <Select>
      <Label>Favorite Animal</Label>
      <Button>
        <SelectValue />
        <span aria-hidden="true">▼</span>
      </Button>
      <Popover>
        <ListBox>
          <ListBoxItem>Aardvark</ListBoxItem>
          <ListBoxItem>Cat</ListBoxItem>
          <ListBoxItem>Dog</ListBoxItem>
          <ListBoxItem>Kangaroo</ListBoxItem>
          <ListBoxItem>Panda</ListBoxItem>
          <ListBoxItem>Snake</ListBoxItem>
        </ListBox>
      </Popover>
    </Select>
  );
};

// Select.test.js
import TestRenderer from "react-test-renderer";
import { AriaSelect } from "./Select";

test("generating snapshot for Select", () => {
  const testRenderer = TestRenderer.create(<AriaSelect />);

  expect(testRenderer).toMatchSnapshot();
});

🤔 Expected Behavior?

Expect out of the box example of React Aria Select example to generate snapshot through react-test-renderer.

😯 Current Behavior

React-test-renderer throws various console errors

 3 |
      4 | test("generating snapshot for Select", () => {
    > 5 |   const testRenderer = TestRenderer.create(<AriaSelect />);
        |                                     ^
      6 |
      7 |   expect(testRenderer).toMatchSnapshot();
      8 | });

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12648:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12709:31)
      at reportUncaughtErrorInDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12736:5)
      at captureCommitPhaseError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16327:5)
      at commitLayoutMountEffects_complete (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14332:9)
      at commitLayoutEffects_begin (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)
      at commitRootImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16062:5)
      at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15933:5)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15454:3)
      at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
      at flushSyncCallbacksOnlyInLegacyMode (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2576:5)
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14910:7)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17770:5)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18510:3)
      at Object.<anonymous> (src/Select.test.js:5:37)

    console.error
      Error: Uncaught [TypeError: createNodeMock is not a function]
          at reportException (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at innerInvokeEventListeners (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
          at invokeEventListeners (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/Users/pkaz/projects/aria/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12648:16)
          at invokeGuardedCallback (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12709:31)
          at reportUncaughtErrorInDEV (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12736:5)
          at captureCommitPhaseError (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16327:5)
          at commitLayoutMountEffects_complete (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14332:9)
          at commitLayoutEffects_begin (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
          at commitLayoutEffects (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)
          at commitRootImpl (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16062:5)
          at commitRoot (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15933:5)
          at performSyncWorkOnRoot (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15454:3)
          at flushSyncCallbacks (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
          at flushSyncCallbacksOnlyInLegacyMode (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2576:5)
          at scheduleUpdateOnFiber (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14910:7)
          at updateContainer (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17770:5)
          at Object.create (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18510:3)
          at Object.<anonymous> (/Users/pkaz/projects/aria/src/Select.test.js:5:37)
          at Promise.then.completed (/Users/pkaz/projects/aria/node_modules/jest-circus/build/utils.js:391:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/Users/pkaz/projects/aria/node_modules/jest-circus/build/utils.js:316:10)
          at _callCircusTest (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:218:40)
          at processTicksAndRejections (node:internal/process/task_queues:95:5)
          at _runTest (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:155:3)
          at _runTestsForDescribeBlock (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:66:9)
          at run (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:25:3)
          at runAndTransformResultsToJestFormat (/Users/pkaz/projects/aria/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
          at jestAdapter (/Users/pkaz/projects/aria/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
          at runTestInternal (/Users/pkaz/projects/aria/node_modules/jest-runner/build/runTest.js:389:16)
          at runTest (/Users/pkaz/projects/aria/node_modules/jest-runner/build/runTest.js:475:34)
          at Object.worker (/Users/pkaz/projects/aria/node_modules/jest-runner/build/testWorker.js:133:12) TypeError: createNodeMock is not a function
          at getPublicInstance (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:22)
          at commitAttachRef (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13429:25)
          at commitLayoutEffectOnFiber (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13342:9)
          at commitLayoutMountEffects_complete (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14330:9)
          at commitLayoutEffects_begin (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14316:7)
          at commitLayoutEffects (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14301:3)
          at commitRootImpl (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16062:5)
          at commitRoot (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15933:5)
          at performSyncWorkOnRoot (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15454:3)
          at flushSyncCallbacks (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
          at flushSyncCallbacksOnlyInLegacyMode (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2576:5)
          at scheduleUpdateOnFiber (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14910:7)
          at updateContainer (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17770:5)
          at Object.create (/Users/pkaz/projects/aria/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:18510:3)
          at Object.<anonymous> (/Users/pkaz/projects/aria/src/Select.test.js:5:37)
          at Promise.then.completed (/Users/pkaz/projects/aria/node_modules/jest-circus/build/utils.js:391:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/Users/pkaz/projects/aria/node_modules/jest-circus/build/utils.js:316:10)
          at _callCircusTest (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:218:40)
          at processTicksAndRejections (node:internal/process/task_queues:95:5)
          at _runTest (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:155:3)
          at _runTestsForDescribeBlock (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:66:9)
          at run (/Users/pkaz/projects/aria/node_modules/jest-circus/build/run.js:25:3)
          at runAndTransformResultsToJestFormat (/Users/pkaz/projects/aria/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:170:21)
          at jestAdapter (/Users/pkaz/projects/aria/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
          at runTestInternal (/Users/pkaz/projects/aria/node_modules/jest-runner/build/runTest.js:389:16)
          at runTest (/Users/pkaz/projects/aria/node_modules/jest-runner/build/runTest.js:475:34)
          at Object.worker (/Users/pkaz/projects/aria/node_modules/jest-runner/build/testWorker.js:133:12)

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1.Clone [email protected]:ihaback/react-aria-select-bug.git 2. Run npm install 3. Run npm run test

Version

1.0.1

What browsers are you seeing the problem on?

Other

If other, please specify.

No response

What operating system are you using?

Windows, MacOs

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I don't know what that error is, what else did you find about it? because I don't think it's from us Do either of these help? https://github.com/facebook/react-native/issues/17987 https://github.com/facebook/react/issues/7740

[reidbarber]

One thing you could do is try a non-collection component to see if it is related to RAC collections implementation. I also saw some comments about wrapping create() calls in act, so maybe try that.

Also you could try using the renderer from React Testing Library if that is an option.

[ihaback]

@snowystinger @reidbarber We did not have any luck with the suggested approaches.

We are considering the solution in this blog post. But ideally we would like a snapshot to include the popover listbox items.

[snowystinger]

I can't find your reproduction repo anymore, did you delete it?

[ihaback]

@snowystinger sorry for that. It's available here

[snowystinger]

I think it's just a problem of using a really old legacy testing renderer https://legacy.reactjs.org/docs/test-renderer.html Can you try https://stackoverflow.com/questions/56257998/jest-testing-modals-in-react-gives-error and see if that works it appears to have worked for me locally

I would not condone this however as a solution. We make extensive use of portals. It'd be better to migrate to a newer testing infrastructure which supports modern React