Storybook: "Unexpected token <" Using 'npm test' with Storyshot and Vue 3.4.0-alpha.5

[itsMattShull]

Issue details

Attempting to use Storyshot and Storybook/Vue (but using nuxt.js) to run tests. When I run npm test I get the following error:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^
    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/render.js:24:21)
      at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/index.js:32:15)

I have some Jest specs that are passing in /test/unit/specs and they are passing, so Jest should be good.

It looks like it's having problems process the <template>. I believe I set up jest.conf.js correctly to process the vue files, but maybe I'm missing something.

Steps to reproduce

You can clone the repo with Storybook 3.4.0-alpha.5 here. Use npm install and then run npm run storybook. After it's running you can use npm test to see the error. The storyshot.test.js file can be found in /test/unit. The stories can be found in /components.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/vue 3.4.0-alpha.5
• @storybook/addon-storyshot 3.4.0-alpha.5
• @storybook/addons 3.4.0-alpha.5

[igor-dv]

@derekshull , thanks for testing it out!

The workaround (I'll add this to docs if I won't find any other solution):

add this to your jest.config.js

transformIgnorePatterns: [
  '/node_modules/(?!(@storybook/.*\.vue$))',
],

Since Storyshots initializes instance of Storybook it loads Storybook's internal components, and some of them are .vue components. So we need to allow Jest to transform vue files from inside Storybook.

A possible solution is to mock every internal vue component in Storyshots addon. However, it feels to me like a less scalable solution

[itsMattShull]

@igor-dv Thanks, I'll check it out today and make sure it works. I'm really loving Storybook so I'm happy to help get involved in testing around Vue/Nuxt.

[itsMattShull]

@igor-dv Doing the above gave me an error with the escape character \ so I added another (to be:

transformIgnorePatterns: [
  '/node_modules/(?!(@storybook/.*\\.vue$))',
],

and it stopped yelling at me.

Then I tried npm test and it all worked! Thanks for the help.

[igor-dv]

Cool! If you could add it to the docs, it'd be great 😉

[chengkj99]

it’s worked, thanks！@igor-dv @derekshull