Closed geromegrignon closed 3 years ago
I'm also getting this error in 6.2.7 on a react project: ● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/sarahfederman/Documents/lui/node_modules/@storybook/addon-docs/blocks.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './dist/esm/blocks';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import React, { useContext, useState } from 'react';
> 2 | import {
| ^
3 | DocsContainer,
4 | Title,
5 | Subtitle,
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (.storybook/preview.tsx:2:1)
I also ran across this when upgrading from 6.1.21
to 6.2.7
. I think it may be less of a bug and more of a lack of documentation issue?
I tracked the change down to 6.2.0-alpha.20
, which introduced the "module" field in a bunch of Storybook package's package.json
(e.g. the change for @storybook/addon-docs
), which means all those packages are now distributed as ESM as well as CommonJS (the "main" field).
No mention of it in the release, though: https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.20
Anyway, to workaround it, you need to tell Jest to transform the files, as they are now ESM (why Jest even tries to use ESM when CommonJS is available is a mystery to me). Using transformIgnorePatterns:
transformIgnorePatterns: ['/node_modules/(?!@storybook)'],
Got the same problem after an upgrade from 6.1 to 6.2:
FAIL src/storybook.test.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/sullivan/p/gitlab.com/project/ui/node_modules/@storybook/addon-docs/blocks.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './dist/esm/blocks';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import React, { FC } from 'react';
> 2 | import {
| ^
3 | DocsContainer as BaseContainer,
4 | DocsContainerProps,
5 | } from '@storybook/addon-docs/blocks';
Adding the transformIgnorePatterns
line suggested by @kylegach does not resolve the issue but change the error output.
Now all my tests are failing, not only storybook:
FAIL src/Sidebar.test.tsx
● Test suite failed to run
/home/sullivan/p/gitlab.com/project/ui/node_modules/typeface-inter/inter.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@font-face {
^
SyntaxError: Invalid or unexpected token
> 1 | import 'typeface-inter';
| ^
2 | import {
3 | CssBaseline,
4 | ThemeProvider,
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/AppWrapper.tsx:1:1)
FAIL src/Navbar.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/sullivan/p/gitlab.com/project/ui/node_modules/@project/design/static/img/logo/icon_outline.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 552.07 552.06">
^
SyntaxError: Unexpected token '<'
14 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
15 | import { faBars } from '@fortawesome/pro-regular-svg-icons';
> 16 | import {
| ^
17 | ReactComponent as LogoDark,
18 | } from '@project/design/static/img/logo/icon_outline.svg';
19 | import {
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/Navbar.tsx:16:1)
FAIL src/storybook.test.ts
● Test suite failed to run
SyntaxError: /home/sullivan/p/gitlab.com/project/ui/node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/preact/loader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
| ^
2 | /** @jsx h */
3 | var __assign = (this && this.__assign) || function () {
4 | __assign = Object.assign || function(t) {
at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:240:12)
at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:138:21)
at PluginPass.enter (node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:163:28)
at newFn (node_modules/@babel/traverse/lib/visitors.js:175:21)
at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:92:31)
at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:116:16)
at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:85:19)
at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:144:19)
Note: I am on a CRA application.
Exact diff introducing the bug on my project:
@kylegach Any chance you can update MIGRATION.md with your findings?
@kylegach Any chance you can update MIGRATION.md with your findings?
@shilman — Sure; PR incoming soonish. I take it my understanding of both the workaround and the originating cause are roughly correct?
@soullivaneuh — Can you please wrap that giant diff in a details
, to collapse it by default? Like this:
<details>
<summary>Full diff</summary>
[diff code block here, the surrounding blank lines are necessary]
</details>
@kylegach We certainly added ESM in 6.2. I haven't looked into the Jest configuration, but if you've researched it and gotten it working I think that will help a lot of people!
@kylegach We certainly added ESM in 6.2. I haven't looked into the Jest configuration, but if you've researched it and gotten it working I think that will help a lot of people!
PR here: https://github.com/storybookjs/storybook/pull/14806
Adding the
transformIgnorePatterns
line suggested by @kylegach does not resolve the issue but change the error output.
@soullivaneuh — It looks like changing that configuration did indeed transform the @storybook packages, and now it's choking on other things. Perhaps you need to transform some additional packages (e.g. typeface-inter
) or filetypes. For example, here's our full jest config (not using CRA, btw):
module.exports = {
testMatch: ['**/__tests__/**/*.test.ts?(x)'],
setupFilesAfterEnv: ['<rootDir>/src/testUtils/jest.setup.ts'],
transform: {
'^.+\\.[tj]sx?$': ['babel-jest', { rootMode: 'upward' }],
'^.+\\.css$': 'jest-css-modules-transform',
'^.+\\.(jpg|jpeg|png|svg|webp)$':
'<rootDir>/src/testUtils/fileTransformer.js',
'^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
},
transformIgnorePatterns: ['/node_modules/(?!(?:@fontsource|@storybook))'],
};
Where fileTransformer
is:
// Mocks every file to return its filename. Makes it possible to test that
// the correct static files (e.g. images) are loaded for components.
// From: https://github.com/facebook/jest/issues/2838#issuecomment-291525128
module.exports = {
process: (_, filename) => `module.exports = '${JSON.stringify(filename)}';`,
};
@kylegach May work, I'll test. But honestly, I don't really understand why I should do any change on my project.
This is a minor release, should not it be breaking changes free? :thinking:
Note: Good catch for the <details>
tip, didn't think about that! :wink:
But honestly, I don't really understand why I should do any change on my project.
This is a minor release, should not it be breaking changes free? 🤔
I agree. That's part of what I was getting at with "why Jest even tries to use ESM when CommonJS is available is a mystery to me". I'd like to understand the situation better, as well. Perhaps @shilman or @ndelangen (who did the ESM work) can weigh in?
Thanks for collapsing that diff. 🙂
This is a minor release, should not it be breaking changes free? 🤔
Yes?
"why Jest even tries to use ESM when CommonJS is available is a mystery to me"
This is unexpected indeed :(
transformIgnorePatterns: ['/node_modules/(?!@storybook)'],
This resolved the error for me but now I'm getting:
TypeError: Cannot read property 'length' of undefined
at getPropertyOfType (../../node_modules/typescript/lib/typescript.js:53670:45)
at checkPropertyAccessExpressionOrQualifiedName (../../node_modules/typescript/lib/typescript.js:67093:24)
at checkPropertyAccessExpression (../../node_modules/typescript/lib/typescript.js:66988:17)
at checkExpressionWorker (../../node_modules/typescript/lib/typescript.js:71950:28)
at checkExpression (../../node_modules/typescript/lib/typescript.js:71870:38)
at maybeCheckExpression (../../node_modules/typescript/lib/typescript.js:71046:34)
at checkBinaryExpression (../../node_modules/typescript/lib/typescript.js:71014:25)
at checkExpressionWorker (../../node_modules/typescript/lib/typescript.js:71991:28)
at checkExpression (../../node_modules/typescript/lib/typescript.js:71870:38)
at checkParenthesizedExpression (../../node_modules/typescript/lib/typescript.js:71905:20)
UPDATE: This was caused by a bad typescript
version. Updating from 4.1.4
to 4.1.5
fixed the issue.
"why Jest even tries to use ESM when CommonJS is available is a mystery to me"
This is unexpected indeed :(
My lack of understanding was bothering me. So, through a combination of topic searching and git blame
'ing, I believe this issue is due to a deep import from '@storybook/addon-docs/blocks'
and jest not being able to infer the CJS entrypoint from that location (see this helpful comment). That makes it related to (if not a duplicate of) #14602, which was fixed by #14769, which was released in 6.3.0-alpha.18
. I confirmed that the following steps worked (for me, at least):
@storybook
packages (though maybe only @storybook/addon-docs
is necessary) to at least 6.3.0-alpha.18
transformIgnorePattern
, as documented above and on MIGRATION.md'@storybook/addon-docs/blocks'
to '@storybook/addon-docs'
@shilman — I'm guessing you'd alleviate a lot of grief by back-porting that PR into a 6.2.*
release (if you think that’s a relatively straightforward effort, I’m happy to try). It was 6.2.20
, after all, which introduced ESM, which then surfaced this issue. You could then revert #14806, if you wish.
Thanks @kylegach. I've updated everything as suggested in https://github.com/storybookjs/storybook/pull/14841
If people are running into this problem, they can use your workaround for 6.2 or update their code to 6.3. I don't want to back-port the changes to 6.2 because I'd like to let it bake for a bit anyway, and by that time we should already be releasing 6.3 stable.
Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.21 containing PR #14841 that references this issue. Upgrade today to the @next
NPM tag to try it out!
npx sb upgrade --prerelease
Closing this issue. Please re-open if you think there's still more to do.
@shilman It looks like the issue is not completly fixed. Just upgraded to 6.3.0-alpha.28
and got the error:
FAIL src/storybook.test.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/sullivan/p/gitlab.com/project/ui/node_modules/@storybook/addon-docs/blocks.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import deprecate from 'util-deprecate';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import React, { FC } from 'react';
> 2 | import {
| ^
3 | DocsContainer as BaseContainer,
4 | DocsContainerProps,
5 | } from '@storybook/addon-docs/blocks';
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (.storybook/components/DocContainer.tsx:2:1)
Here is the related .storybook/components/DocContainer.tsx
that causes the problem:
import React, { FC } from 'react';
import {
DocsContainer as BaseContainer,
DocsContainerProps,
} from '@storybook/addon-docs/blocks';
import { useDarkMode } from 'storybook-dark-mode';
import { themes } from '@storybook/theming';
// @see https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-802018811
export const DocsContainer: FC<DocsContainerProps> = ({ children, context }) => {
const { parameters } = context;
const dark = useDarkMode();
return (
<BaseContainer
context={{
...context,
parameters: {
...parameters,
docs: {
theme: dark ? themes.dark : themes.light,
},
},
}}
>
{children}
</BaseContainer>
);
};
export default null;
It is used by the .storybook/preview.ts
configuration file:
/* eslint-disable no-use-before-define, react/jsx-filename-extension */
import { Parameters, DecoratorFn } from '@storybook/react';
import { create, ThemeVars } from '@storybook/theming';
import { DocsContainer, StoryDecorator } from './components';
const projectTheme: Partial<ThemeVars> = {
brandTitle: 'Project UI',
brandImage: 'https://design.project.dev/img/logo/text.svg',
};
export const parameters: Parameters = {
actions: {
argTypesRegex: '^on[A-Z].*',
},
docs: {
container: DocsContainer,
},
darkMode: {
dark: create({
base: 'dark',
...projectTheme,
}),
light: create({
base: 'light',
...projectTheme,
}),
},
};
export const decorators: DecoratorFn[] = [
StoryDecorator,
];
Could you please re-open?
BTW, why a bug fix is released on the alpha of the next minor? Should not be a 6.2.x
release? :thinking:
Regards
@soullivaneuh — You have to change your imports from '@storybook/addon-docs/blocks'
to '@storybook/addon-docs'
. The PR that addresses this issue updated MIGRATION.md with more details.
Good catch @kylegach, I did not pay intention to that! :+1:
It is working now.
Unless released a 6.2.x
bugfix for that is a thing, this issue may be closed.
Thanks
We just bumped into this error due to use of Storybook Docs Table of Content addon
Fix was to use Jest's moduleNameMapper and map references of @storybook/addon-docs/blocks to @storybook/addon-docs:
In your jest config:
Describe the bug
I updated my Angular project to Storybook 6.2.0-alpha using
npx sb@next upgrade --prerelease
. When runningnpm run test
to test the snapshots, the terminal outputs the following error message :To Reproduce Steps to reproduce the behavior:
storybook-6.2.0
branchnpm run test
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
Code snippets If applicable, add code samples to help explain your problem.
System
Additional context Add any other context about the problem here.