Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FocusScope causes error in snapshot tests

See original GitHub issue

🐛 Bug Report

Using the FocusScope component in a storyshots snapshot test leads to the following error:

TypeError: Cannot read property 'nextSibling' of null

      at node_modules/@react-aria/focus/dist/packages/@react-aria/focus/src/FocusScope.tsx:96:33
      at commitHookEffectListMount (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11692:26)
      at commitLifeCycles (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11753:11)
      at commitLayoutEffects (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at HTMLUnknownElement.callCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
      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/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11440:16)
      at invokeGuardedCallback (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
      at commitRootImpl (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14172:9)
      at unstable_runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at commitRoot (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14011:3)
      at performSyncWorkOnRoot (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13440:3)
      at node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
      at unstable_runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at flushSyncCallbackQueueImpl (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
      at flushSyncCallbackQueue (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
      at scheduleUpdateOnFiber (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13004:9)
      at updateContainer (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16454:3)
      at create (node_modules/@storybook/addon-storyshots/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17149:3)
      at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/react/renderTree.js:24:18)
      at node_modules/@storybook/addon-storyshots/dist/ts3.9/test-bodies.js:9:24
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/snapshotsTestsTemplate.js:29:24)

💻 Code Sample

I have created a minimal example here: https://github.com/tom-schafer-smar/focus-scope-snapshot-issue

The following is an example of a story that causes the error:

import { ComponentMeta } from "@storybook/react";
import React from "react";
import { FocusScope } from "react-aria";

export default {
  title: "FocusScope",
  component: FocusScope,
} as ComponentMeta<typeof FocusScope>;

export const Primary = () => <FocusScope>a</FocusScope>;

🌍 Your Environment

Software	Version(s)
react-aria	3.17.0
Browser	N/A
Operating System	MacOS Monterey 12.4

Issue Analytics

State:
Created a year ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

LFDanLucommented, Jun 25, 2022

Just tried it out with a generic component (div with ref that checked nextSibiling on render), it definitely seems to be due to the lack of a custom renderer rather than FocusScope itself. Without JSDOM or some kind of renderer, the ref itself is undefined and thus it cannot check nextSibling. I’ll be closing this out, feel free to reopen this if you run into any other issues

0reactions

tom-schafer-smarcommented, Jun 27, 2022

Thanks, I appreciate your time looking into this!

Top Results From Across the Web

What's wrong with snapshot tests. Since snapshot ... - Medium

When you write expect(mycomponent).toMatchSnapshot() , Jest creates a snapshot file, like mytest.spec.js.snap , with all snapshots of your test file. You ...

Snapshot Testing - Jest

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.

UI Testing Failure - Failure getti… | Apple Developer Forums

UI Testing Failure - Failure getting snapshot Error ... happen all the time, but frequent enough that it causes a serious problem with...

react css modules causes the snapshot tests to fail

As you can see, the hash is changed, so snapshot test is failing. The issue is that i cloned a repo from github,...

Snapshot tests - testthat

Binary formats like plots or images, which are very difficult to describe in code: i.e. the plot looks right, the error message is...