Error "_mocks[name] is not a function" occurs with Chromatic

[TakaoNarikawa]

Hi, I would like to appricate your great work!

The title error occurs in stories that do not use the mocking library. It occurs when using chromatic with the GitHub workflow to build a storybook. It does not occur in the local environment.

Error: Evaluation failed: TypeError: _mocks[name] is not a function
    at $$mock$$ (https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/main.ef9776ff.iframe.bundle.js:1:75683)
    at undecoratedStoryFn (https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:2473008)
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:1761512
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:2440202
    at jsxDecorator (https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:1447621)
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:1761512
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:2439430
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:2440202
    at wrapper (https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:1711905)
    at https://xxxxxxxxxxxxxxxxx.capture.chromatic.com/vendors~main.6be36cb9.iframe.bundle.js:2:1770004
    at ExecutionContext._evaluateInternal (/var/task/capture-v4/build/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (/var/task/capture-v4/build/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:107:16)
    at async /var/task/capture-v4/build/bundle.js:714342:7
    at async NavigatorWatcher2.waitForIdle (/var/task/capture-v4/build/bundle.js:683975:9)
    at async PuppeteerRenderer.renderSpec (/var/task/capture-v4/build/bundle.js:714289:25)
    at async PuppeteerRenderer.renderSnapshot (/var/task/capture-v4/build/bundle.js:714179:21)
    at async PuppeteerRenderer.captureSpecs (/var/task/capture-v4/build/bundle.js:714128:18)
    at async PuppeteerRenderer.executeWithCallback (/var/task/capture-v4/build/bundle.js:714396:14)

Here is my workaround, I made it work by patching node_modules/storybook-addon-module-mock/dist/plugins/babel-import-writer.js as follows

const buildMocks = (0, core_1.template)(`
  const MOCKS = {};
  export const $$mock$$ = (name, value) => MOCKS[name](value);
`);

to

const buildMocks = (0, core_1.template)(`
  const MOCKS = {};
  export const $$mock$$ = (name, value) => MOCKS[name](value);
  $$mock$$.parameters = {
    // disables Chromatic's snapshotting on a story level
    chromatic: { disableSnapshot: true },
  };
`);

npx patch-package storybook-addon-module-mock

Reference: https://www.chromatic.com/docs/ignoring-elements

[TakaoNarikawa]

My workaround fixes the snapshot error. However, it still occurs in Storybook. There is a story named "Mock" in each component that I did not define.

Are there any workarounds for this?

[SoraKumo001]

I cannot reproduce the error and do not know how to handle it.

Error handling was added in 1.0.8.

[TakaoNarikawa]

Thank you for your quick response!

I tried v1.0.8 but got the error "Exported function not found. This makes sense because the codeline where the "_mocks[name] is not a function" error occurred in v1.0.7, the "Exported function not found." error should occur in v1.0.8.

I think the critical point of this error is export const $$mock$$ = .... The $$mock$$ seems to be treated as a story in Chromatic. (not like in pure Storybook)

For now I will use the $$mock$$.parameters.chromatic.disableSnapshot patch. 😎

[SoraKumo001]

I deployed to chromatic, but could not reproduce the symptoms.

https://641aeab486aa5e81000ec4e4-ybgmjzcget.chromatic.com/?path=/story/components-formmock--primary

[TakaoNarikawa]

Oh, really, I will review my project. Thank you for your great efforts.