-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
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
Vite + Storybook 6.3 + Jest: "global is not defined" #15391
Comments
I was able to get a little further by mapping
Storybook loads now, but now I get this error: Note I also tried adding |
Alright, I finally fixed this... import * as jest from "jest-mock";
window.jest = jest; This combined with assigning preview.js import * as jest from "jest-mock";
window.jest = jest;
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}; main.js module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
core: {
builder: "storybook-builder-vite",
},
async viteFinal(config) {
return {
...config,
define: {
...config.define,
global: "window",
},
esbuild: {
...config.esbuild,
jsxInject: `import React from 'react'`,
},
};
},
}; Updated my repo too |
cc @eirslett |
Following up on this... it's actually a bad idea to redefine global like this in define: {
...config.define,
global: "window",
}, The Vite docs even mention this. The problem is that when running a So I removed this code in <script>
window.global = window;
</script> main.js: module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
core: {
builder: "storybook-builder-vite",
},
async viteFinal(config) {
return {
...config,
esbuild: {
...config.esbuild,
jsxInject: `import React from 'react'`,
},
rollupOptions: {
...config.rollupOptions,
// Externalize deps that shouldn't be bundled
external: ["react", "react-dom"],
output: {
// Global vars to use in UMD build for externalized deps
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
};
},
}; preview.js: import * as jest from "jest-mock";
window.jest = jest;
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}; preview-head.html: <script>
window.global = window;
</script> |
cc @eirslett |
Maybe we should document this in the README - a section about troubleshooting and potential workarounds? We could inject |
FWIW, jest does now use globalThis, but only in the alpha 28 versions so far. |
Jest v28 is now released. I've encountered a similar issue in the context of nuxt3, where the To support these use cases, it would be nice if globalThis is used everywhere. Can this issue maybe be reopened? |
@tobiasdiez I'm not familiar with nuxt, but as I understand, using the Do you have a minimal reproduction we could take a look at? Is your issue related to jest, or the import you linked in vue3? |
Nuxt tries to cover a few distribution and render channels (e.g. service workers) and for this reason adds its own polyfills, but Yes, my use case is completely independent of jest. |
I think maybe it is worth opening a new issue proposing a move to globalThis. But, it doesn't work in internet explorer, so it might be a non starter for now. Or, maybe a polyfill can be used there. Good to discuss in an issue, I think. |
For anyone using yarn, overriding the "resolutions": {
"jest-mock": "^28.1.0"
}, |
Or with overrides in npm, confirmed working. |
See the following issues: - storybookjs/storybook#18399 - storybookjs/storybook#15391
See the following issues: - storybookjs/storybook#18399 - storybookjs/storybook#15391
See the following issues: - storybookjs/storybook#18399 - storybookjs/storybook#15391
I'm confused, if this is the fix, couldn't we open a PR here in storybook to upgrade the dependency
Or what else are we missing? |
Yes, I've been working on upgrading jest in the storybook packages, but it's a bit complex because of the way that jest types are global and the interactions with jest-dom. I'm waiting for some feedback on testing-library/jest-dom#483. |
See the following issues: - storybookjs/storybook#18399 - storybookjs/storybook#15391
See the following issues: - storybookjs/storybook#18399 - storybookjs/storybook#15391
Any update on this? |
Unfortunately jest-dom seems to be essentially unmaintained, and the Storybook team has not been prioritizing testing package changes like storybookjs/expect#12, so I'm still a bit stuck, unfortunately. |
Describe the bug
I am trying to get Vite + Storybook 6.3 working with some existing stories. These stories use
jest.fn()
as mocks. I previously added this inpreview.js
to getjest.fn()
working within storybook:But when using the Vite integration I am now getting an error when running storybook:
To Reproduce
I am trying
vite
with storybook 6.3 and npm 7.19 workspaces. My repro repo is here: https://github.com/adiun/vite-monorepo:npm 7.19
installed for the workspaces functionalitynpm i
app
folder, runnpm run storybook
.System
The text was updated successfully, but these errors were encountered: