Storybook: TypeError: Cannot read property 'STORYBOOK_HOOKS_CONTEXT' of undefined

[loic-lopez]

Describe the bug
When running initStoryshots from import initStoryshots from "@storybook/addon-storyshots"
an error occurs when storyshots starts.

Code snippets

Storyshot code:

import initStoryshots from "@storybook/addon-storyshots"

describe("storybook tests", () => {
  initStoryshots({
    configPath: "./storybook",
    framework: "react-native"
  })
})

Error from console:

 ● storybook tests › Storyshots › Header › Behavior

    TypeError: Cannot read property 'STORYBOOK_HOOKS_CONTEXT' of undefined

      at node_modules/@storybook/addons/dist/hooks.js:236:38
      at node_modules/@storybook/client-api/dist/client_api.js:129:14
      at node_modules/@storybook/addons/dist/hooks.js:266:20
      at Object.storyFn (node_modules/@storybook/client-api/dist/story_store.js:363:30)
      at getRenderedTree (node_modules/@storybook/addon-storyshots/dist/frameworks/react/renderTree.js:22:28)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:21:18
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:44:47)

System:

Environment Info:

  System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 13.0.1
  npmPackages:
    @storybook/addon-storyshots: ^5.1.11 => 5.2.0 
    @storybook/react-native: ^5.1.11 => 5.2.0 
    @storybook/theming: ^5.1.11 => 5.2.0

[shilman]

@Hypnosphi any ideas here?

[brunoebstein]

there is a reference to window in https://github.com/storybookjs/storybook/blob/b41b3abdd7290dc95c5158a80098f602940e910a/lib/addons/src/hooks.ts#L147

but window does not exist in react native

[loic-lopez]

As a temporary workaround you can do:

import initStoryshots from "@storybook/addon-storyshots"
import { merge } from "lodash-es"

jest.mock("global", () => merge(global, { window: { STORYBOOK_HOOKS_CONTEXT: "" } }));

describe("storybook tests", () => {
  initStoryshots({
    configPath: "./storybook",
    framework: "react-native"
  })
})

[vladstart1]

@loic-lopez when I tried your code(to solve this problem) I got this error message in console:

babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: merge
Whitelisted objects: Array, ArrayBuffer, Boolean, DataView, Date, Error, EvalError, Float32Array, Float64Array, Function, Generator, GeneratorFunction, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, NaN, Number, Object, Promise, Proxy, RangeError, ReferenceError, Reflect, RegExp, Set, String, Symbol, SyntaxError, TypeError, URIError, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, WeakMap, WeakSet, arguments, console, expect, isNaN, jest, parseFloat, parseInt, require, undefined, BigUint64Array, BigInt64Array, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, escape, unescape, eval, isFinite, SharedArrayBuffer, Atomics, BigInt, WebAssembly, DTRACE_NET_SERVER_CONNECTION, DTRACE_NET_STREAM_END, DTRACE_HTTP_SERVER_REQUEST, DTRACE_HTTP_SERVER_RESPONSE, DTRACE_HTTP_CLIENT_REQUEST, DTRACE_HTTP_CLIENT_RESPONSE, global, process, GLOBAL, root, Buffer, clearImmediate, clearInterval, clearTimeout, setImmediate, setInterval, setTimeout, URL, URLSearchParams.
Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.

Could you please help me, what I did wrong?

[loic-lopez]

@vladstart1 I have imported merge function from lodash

Your error:

Invalid variable access: merge

You can do:

jest.mock("global", () => Object.assign(global, { window: { STORYBOOK_HOOKS_CONTEXT: "" } }));

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.1 containing PR #8163 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.2 containing PR #8163 that references this issue. Upgrade today to try it out!