Open Bronowsm opened 2 months ago
dannyhw
commented
2 months ago @Bronowsm hey, thanks for raising this issue. I have actually seen a similar issue but I'm not familiar with the test package implementation so I'll have to defer to others. Will look into it.
JavanPoirier
commented
1 month ago +1 👀
dannyhw
commented
1 month ago Sorry for the delay! This slipped off my radar but I will make sure to ask around tomorrow.
dannyhw
commented
1 month ago so looking back in my chat history with some people the information that I have is that it may have something to do with the CJS of the storybook/test package being messed up and forcing the mjs version could help. Not sure how to do that with webpack yet but leaving this note here for context.
dannyhw
commented
1 month ago I think first step would be to create a more minimal reproduction of the problem and then to verify which entrypoint is being used (i.e cjs/mjs)
one thing to try is adding to webpack final something like:
config.resolve.extensions = ['mjs', ...config.resolve.extensions]
to get mjs loading before cjs
Bronowsm
commented
3 weeks ago @dannyhw thanks for hints, they were very useful - it was about forcing storybook/test package to use .mjs extension. But overriding config.resolve.extensions didn't do the trick. What I did instead, was to point out to the exact file in node_modules and storybook/test is working again!
config.resolve.alias = {
...config.resolve.alias,
'@storybook/test': path.resolve(__dirname, '../node_modules/@storybook/test/dist/index.mjs'),
};'@storybook/test': path.resolve(__dirname, '../node_modules/@storybook/test/dist/index.mjs'),
Why didn't I think of that!? I moved on with the failure of the extension priority. Anywho, thanks @Bronowsm, works for me!
dannyhw
commented
2 weeks ago Interesting, its so strange that the wrong extension is always getting resolved 😕 . I wonder if theres something wrong with the exports in package.json for the storybook/test package.
Or maybe it has something to do with the babel loader that addon-react-native-web is including, not sure
JavanPoirier
commented
2 weeks ago Found another issue, it appears that the solution @Bronowsm proposed does work for stories, but not when mocking. The underlying implementation of fn appears to be just an export from @vitest/spy, so not immediately sure why this doesn't work.
Works: Button.stories.ts
import { fn } from '@storybook/test';
const meta = {
title: 'Example/Button',
component: Button,
args: { onClick: fn() },
} satisfies Meta<typeof Button>;Works: useRouter.mock.ts
import { fn } from '@vitest/spy';
import * as actual from './useRouter';
export const useRouter = fn(actual.useRouter).mockName('useRouter').mockReturnValue({
back: () => null,
push: () => null,
replace: () => null,
parseNextPath: () => '',
});Does NOT Work:
import { fn } from '@storybook/test';
import * as actual from './useRouter';
export const useRouter = fn(actual.useRouter).mockName('useRouter').mockReturnValue({
back: () => null,
push: () => null,
replace: () => null,
parseNextPath: () => '',
});@JavanPoirier when you use the mock from storybook/test what problem/error do you get?
JavanPoirier
commented
2 weeks ago @JavanPoirier when you use the mock from storybook/test what problem/error do you get?
Just that it does not exist. Changing the import resolves it.
kasperpeulen
commented
2 weeks ago @JavanPoirier Does this happen in storybook 8.3? We changed the order of the export condition in 8.3. So that ESM always has highest prio:
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js",
"node": "./dist/index.js",
"default": "./dist/index.mjs"
},
"./package.json": "./package.json"
},Looks like I sorted it out, using the @vitest/spy import made it so the default mockReturnValue I specified in the useRouter.mock.ts was applied without directly importing it into the story to use in beforeEach (as the docs do say to do). I could then overwrite the default mock by importing it and specifying a chained mockReturnValue call.
Now when using the @storybook/test export I must ALWAYS have a beforeEach statement, import the mock and call mockReturnValue.
I kinda liked the ability to not have to add the beforeEach call and having just function stubs in place.
I am on storybook@npm:8.3.4
Example:
useRouter.mock.ts
import { fn } from '@vitest/spy';
import * as actual from './useRouter';
export const useRouter = fn(actual.useRouter).mockName('useRouter').mockReturnValue({
back: () => null,
push: () => null,
replace: () => null,
parseNextPath: () => '',
});I never needed to import it anywhere or call beforeEach, the mock just worked.
Now with @storybook/test, I must import the mock into preview.tsx or a story and call mockReturnValue
yannbf
commented
2 weeks ago Hey @JavanPoirier that's pretty weird. You should be using fn from @storybook/test instead. Could you share a reproduction repo so we can see what's going on?
JavanPoirier
commented
2 weeks ago Hey @JavanPoirier that's pretty weird. You should be using
fnfrom@storybook/testinstead. Could you share a reproduction repo so we can see what's going on?
Describe the bug
Whenever I add
@storybook/addon-react-native-webpackage to addons array, @storybook/test package stops working. When I comment out or remove @storybook/addon-react-native-web from addons array, the error is gone (screenshot of error below)Here is my setup:
.storybook/main.js file:
.storybook/preview:
.babelrc
package.json:
webpack.config.js
Screenshots and/or logs
Environment