Jest Snapshots

[thenationofalex]

Howdy,

I've noticed that when I setup Jest Snapshot testing on a page that has Scrollama setup, it continually re-generating ids. E.g:

    -                 id="813dd771-d938-48ca-a2d5-0c7b82d84333"
    +                 id="588693b2-d464-4ada-8abf-b217a101d32f"

Therefore snapshot tests are always failing. Is it possible to avoid this?

[jsonkao]

So if the content/position of the step (along with the Scrollama instance) were staying the same, it would be ideal that the id also stays the same? (Sorry, I'm not familiar with Jest Snapshots.)

[thenationofalex]

Howdy,

Snapshot testing relies on the code being the same unless there's changes to the document.

When scrollama runs it applies a unique ID to each step. What I'm looking for is a more programatic way to assign ids so that when the test runner runs the IDs can be kept the same and there's no regression introduced.

• Is there a way to assign our own ids to each step?
• Or could we not use something random when detecting a test environment?

Thanks

[jsonkao]

I think it'd be ideal if the user didn't need to implement this since the randomness isn't necessary.

Wait, I just remembered that I removed the uuid dependency a while ago in favor of just using indexes as id's. Which version of React Scrollama are you using?

[thenationofalex]

We're on version "~2.1.0". If I upgrade to the latest version we get a new error: Please feel free to say if this is beyond the scope of your projects :)

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Uncaught [ReferenceError: IntersectionObserver is not defined]
        at reportException (/path/to/file/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at invokeEventListeners (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
        at HTMLUnknownElementImpl._dispatch (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at commitRootImpl (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
        at unstable_runWithPriority (/path/to/file/node_modules/scheduler/cjs/scheduler.development.js:646:12) ReferenceError: IntersectionObserver is not defined
        at map (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:180:19)
        at Array.map (<anonymous>)
        at Scrollama.updateStepAboveIO (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:171:40)
        at Scrollama.updateIO (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:160:10)
        at Scrollama.handleEnable (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:142:14)
        at Scrollama.domDidLoad (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:101:10)
        at Scrollama.componentDidMount (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:95:5)
        at commitLifeCycles (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:20663:24)
        at commitLayoutEffects (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:23426:7)
        at HTMLUnknownElement.callCallback (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
        at invokeEventListeners (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
        at HTMLUnknownElementImpl._dispatch (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
        at HTMLUnknownElementImpl.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
        at HTMLUnknownElementImpl.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
        at HTMLUnknownElement.dispatchEvent (/path/to/file/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
        at Object.invokeGuardedCallbackDev (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
        at invokeGuardedCallback (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
        at commitRootImpl (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:23151:9)
        at unstable_runWithPriority (/path/to/file/node_modules/scheduler/cjs/scheduler.development.js:646:12)
        at runWithPriority$1 (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
        at commitRoot (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
        at performSyncWorkOnRoot (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
        at scheduleUpdateOnFiber (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
        at updateContainer (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
        at /path/to/file/node_modules/react-dom/cjs/react-dom.development.js:26021:7
        at unbatchedUpdates (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
        at legacyRenderSubtreeIntoContainer (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
        at Object.render (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
        at /path/to/file/node_modules/@testing-library/react/dist/pure.js:98:25
        at batchedUpdates$1 (/path/to/file/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
        at act (/path/to/file/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
        at render (/path/to/file/node_modules/@testing-library/react/dist/pure.js:94:26)
        at Object.<anonymous> (/path/to/file/src/components/Home/Home.test.js:25:18)
        at Object.asyncJestTest (/path/to/file/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:102:37)
        at /path/to/file/node_modules/jest-jasmine2/build/queueRunner.js:43:12
        at new Promise (<anonymous>)
        at mapper (/path/to/file/node_modules/jest-jasmine2/build/queueRunner.js:26:19)
        at /path/to/file/node_modules/jest-jasmine2/build/queueRunner.js:73:41
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

  console.error node_modules/react-dom/cjs/react-dom.development.js:20085
    The above error occurred in the <Scrollama> component:

        at Scrollama (/path/to/file/node_modules/react-scrollama/src/Scrollama.js:54:22)
        at div
        at div
        at div
        at Graphic (/path/to/file/src/components/Home/Steps/Steps.js:17:24)
        at DesktopView
        at div
        at Section3
        at Home (/path/to/file/src/components/Home/Home.js:18:33)
        at ApolloProvider (/path/to/file/node_modules/@apollo/client/react/context/ApolloProvider.js:5:21)
        at MockedProvider (/path/to/file/node_modules/@apollo/client/utilities/testing/mocking/MockedProvider.js:10:28)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        9.16s

[jsonkao]

Ah I think you need to add the intersection observer polyfill!

[thenationofalex]

That did it! Really appreciate the help, thank you :)

[jsonkao]

Yay no problem!