Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Intro To Storybook - Tests Fail after 'Single Component/Automated Testing' steps

See original GitHub issue

Tests are expected to pass after pasting the code from the guide in the project. The output on yarn jest:

yarn run v1.19.0
$ /Users/jnevitt/git/taskbox/node_modules/.bin/jest
 FAIL  src/storybook.test.js
  ● Test suite failed to run

    import initStoryshots from "@storybook/addon-storyshots";

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

 FAIL  src/App.test.js
  ● 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:
     • 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:


    SyntaxError: /Users/jnevitt/git/taskbox/src/App.test.js: Unexpected token (6:31)

      4 |
      5 | test('renders learn react link', () => {
    > 6 |   const { getByText } = render(<App />);
        |                                ^
      7 |   const linkElement = getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

      at Parser.raise (node_modules/@babel/parser/lib/index.js:6975:17)
      at Parser.unexpected (node_modules/@babel/parser/lib/index.js:8368:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:9627:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:9210:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:9190:21)
      at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:9056:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:9029:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:8975:21)
      at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:10297:18)
      at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:9407:22)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        1.126s
Ran all test suites.
error Command failed with exit code 1.
info Visit for documentation about this command.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

jonniebigodescommented, Dec 23, 2019

@jacknevitt sorry for the issue you’re experiencing. I think i have a solution for it… Going to make some more tests and report back, do you mind waiting a bit longer?

jonniebigodescommented, Jan 13, 2020

@domyen and @jacknevitt if you both don’t mind i’m going to close this now as it’s answered.

@jacknevitt If you have further questions, re-open it and leave a comment or try the Discord chat or the Storybook issue tracker. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Test to maintain quality - Storybook Tutorials - JS.ORG
In chapter 5, we automate design system testing to prevent UI bugs. This chapter dives into what characteristics of UI components warrant testing...
Read more >
Interaction tests - Storybook - JS.ORG
How does component testing in Storybook work? ... You start by writing a story to set up the component's initial state. Then simulate...
Read more >
Test runner - Storybook
The test-runner is a standalone, framework-agnostic utility that runs parallel to your Storybook. You will need to take some additional steps to set...
Read more >
Testing composite components - Storybook Tutorials
Here's a quick reminder of the process: Isolate components. Use Storybook to test one component at a time. ✍ Write out...
Read more >
How to test UIs with Storybook
Storybook provides a clean-room environment for testing components in isolation. Stories make it easy to explore a component in all its variations, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found