Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to have stories without mocks with this addon #21

Closed
Slessi opened this issue Mar 28, 2024 · 2 comments
Closed

Unable to have stories without mocks with this addon #21

Slessi opened this issue Mar 28, 2024 · 2 comments

Comments

@Slessi
Copy link

Slessi commented Mar 28, 2024

I need mocks for some, but not all stories. I am seeing the below error, for any story that does not define mocks:

TypeError: Cannot read properties of undefined (reading 'mocks')
at wrapper (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook-addon-fetch-mock_preview.js?v=96f16fe2:2793:86)
at http://localhost:6006/sb-preview/runtime.js:86:3164
at http://localhost:6006/sb-preview/runtime.js:86:3277
at hookified (http://localhost:6006/sb-preview/runtime.js:84:10607)
at http://localhost:6006/sb-preview/runtime.js:100:3256
at http://localhost:6006/sb-preview/runtime.js:100:3918
at http://localhost:6006/sb-preview/runtime.js:84:11410
at unboundStoryFn (http://localhost:6006/sb-preview/runtime.js:100:5353)
at renderWithHooks (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AC6QIUQG.js?v=96f16fe2:12171:26)
at mountIndeterminateComponent (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AC6QIUQG.js?v=96f16fe2:14921:21)

Reproduction: https://github.com/Slessi/storybook-addon-fetch-mock-no-data-repro

I expect to be able to have stories without mocks, is this not possible? Am trying to migrate from storybook-addon-mock which allowed for this.

There was a similar issue at #6 but the author claims it was a problem on his end, however in my minimal reproduction I cannot imagine what I am doing wrong.

@RobinSCU
Copy link

RobinSCU commented Apr 3, 2024

I have the same problem with the addon but i think i found a temporary solution.

The Problem is that in the withFetchMock.ts are multiple lines of code trying to access the parameters object which isn't defined when you have no fetchMocks parameter in the global configs or in the story. Because of that issue we get an JS exception.

@JohnAlbin i think the issue starts add Line 76 in the withFetchMock.ts https://github.com/JohnAlbin/storybook-addon-fetch-mock/blob/main/src/withFetchMock.ts#L76, that is the first point where the code tries to access the parameters object.

Since we know that the parameters object is undefined i think you could skip the complete rest of the code except return storyFn(context) ?

some think like this:

// When parameters is undefined, render the story
if(!parameters)
  return storyFn(context);

// Add all the mocks.
addMocks(parameters.mocks);

// Do any additional configuration of fetchMock, e.g. setting
// fetchMock.config or calling other methods.
if (typeof parameters.useFetchMock === 'function') {
  parameters.useFetchMock(fetchMock);
}

// Add any catch-all mocks.
addMocks(parameters.catchAllMocks, 'catchAllMocks');

// Add any catch-all urls last.
if (Array.isArray(parameters.catchAllURLs)) {
  parameters.catchAllURLs.forEach((url) => {
	fetchMock.mock(
	  {
		// Add descriptive name for debugging.
		name: `catchAllURLs[ ${url} ]`,
		url: `begin:${url}`,
	  },
	  // Catch-all mocks will respond with 404 to make it easy to determine
	  // one of the catch-all mocks was used.
	  404,
	);
  });
}

// Render the story with mocks.
return storyFn(context);

@Slessi for the meentime, you can just add a empty fetchMock Object to the preview.ts under parameters it fixed for me

    parameters: {
        fetchMock: {},
    },

@JohnAlbin
Copy link
Owner

Thanks for the analysis @RobinSCU and @Slessi!

I believe #20 fixes this issue then!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants