Documentation suggests using es6 in jest's setupFiles.js

[radfahrer]

Describe the bug
Reading the documentation for global decorators here: https://storybook.js.org/addons/@storybook/react-testing

It says to import storybook/preview.js

Import is an es6 feature as is the component story format which is the recommended way to implement preview.js

However, Jest doesn't transpile the setupFiles.js file when starting up: jestjs/jest#9041

This causes errors when trying to run tests:

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/dan.green/Code/react-build-store/jest-setup-files.js:5
    import { setGlobalConfig } from '@storybook/react';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

To Reproduce
Steps to reproduce the behavior:

1. Install Jest 26
2. Follow instructions for global decorators here: https://storybook.js.org/addons/@storybook/react-testing
3. Run jest

Expected behavior
Tests should run and composeStory should work.

[yannbf]

Hey @radfahrer thanks for opening this issue and for using this library!

Could you make a reproduction repo? I have tested out in CRA and non-CRA projects and they worked well. I assume you have worked around it by using require instead of import?

[elevatebart]

Hello @radfahrer good issue indeed,

What versions of node and Storybook are you using?

[radfahrer]

Hey @radfahrer thanks for opening this issue and for using this library!

Could you make a reproduction repo? I have tested out in CRA and non-CRA projects and they worked well. I assume you have worked around it by using require instead of import?

Actually trying to convert to require didn't end up working for me. Since the file that I have my decorators in is a .ts file and it imports another library. I didn't feel like going all the way down that rabbit hole.

I ended up abandoning the idea of global decorators for the time being. Our project doesn't currently have any but we are using composeStory and one of our common story decorators was prolific enough that we wanted to try making it global.

[radfahrer]

Hello @radfahrer good issue indeed,

What versions of node and Storybook are you using?

node 14 and storybook 6

[Ionshard]

I ran into this same problem. I am using @storybook/react v6.3.7 and node 16.

I am not using babel or webpack explicitly and I am using Typescript and ts-jest and I ran into the same issue. I got around it by converting my setupTest.js file to a setupTest.ts file and converting my preview.js to preview.tsx (I was importing a wrapping React component)

I don't have time to setup a reproduction example but hopefully this comment helps someone else who ends up here from Google.

[josh-degraw]

I'm also running into this issue, and the last suggestion here didn't change anything for me since I was already doing it, but I thought I'd share what helped me for anyone who may have the same issue as me.

The file that seemed to be causing the issue for me is @storybook/addon-docs/blocks. When I comment out that import and its usage from my preview.tsx file, it works fine. And after investigating it seems that import was deprecated and once I changed it to @storybook/addon-docs I am no longer running into that error.

[jw-miaem]

Hi,

I've tried this and I get same issue but it's due to the decorators for some reason. It's with a shiny new setup:
"jest": "^29.0.3","ts-jest": "^29.0.1","@storybook/react": "^6.5.12"

The error I get is:
preview.tsx:33
return (

^

SyntaxError: Unexpected token '<'

and this is using the example decorator from this repo?

Would like to use this addon but not sure if its viable atm

looking at it with fresh eyes, its possibly my setup that needs tweaking

[jayantasamaddar]

I had a .babelrc with presets (format: JSON). Unfortunately, the Babel transpiling was not being done for Jest. Converted it into a babel.config.js and then it transpiles the imports correctly and no errors show up. I still have my Global Decorators being called manually (Have a global ThemeProvider), so I am going to check if this actually is working. Will update.

But for now THIS particular error (SyntaxError: Cannot use import statement outside a module) is gone.

The trick it seems is to let Babel do the transpiling. The preset here at work is the @babel/preset-env and maybe the @babel/preset-react if your decorators use React Components like mine. Hope this helps.

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
};

setupFile.js

const { setGlobalConfig } = require('@storybook/testing-react');
const globalStorybookConfig = require('../.storybook/preview'); // path of your preview.js file

setGlobalConfig(globalStorybookConfig);

Update, it's working with Global Decorators!

[yannbf]

Hey there! I wanted to thank you for using @storybook/testing-react!

@storybook/testing-react has been promoted to a first-class Storybook functionality in Storybook 7. This means that you no longer need this package, and this package will not be worked on anymore (especially regarding Storybook 6, unless there are security issues). Instead, you can import the same utilities, but from the @storybook/react package. Additionally, the internals of composeStories and composeStory have been revamped, so the way a story is composed is way more accurate, and it's possible this issue doesn't happen there anymore.

Please do the following:

1. Upgrade to Storybook 7 if you haven't already
2. Uninstall @storybook/testing-react
3. Update your imports from @storybook/testing-react to @storybook/react

// Component.test.jsx
- import { composeStories } from '@storybook/testing-react';
+ import { composeStories } from '@storybook/react';

// setup-files.js
- import { setProjectAnnotations } from '@storybook/testing-react';
+ import { setProjectAnnotations } from '@storybook/react';

For now, I'll be closing this issue. Please, if even after migrating, you are still experiencing issues, report them in the Storybook monorepo.

Thank you so much for this journey!