Failing to load config when doing unit tests with Jest (default config)

[chopfitzroy]

Describe the bug
A clear and concise description of what the bug is.

Storybooks fails fails to load/find .storybooks.

To Reproduce
Steps to reproduce the behavior:

Create new project with vue-cli.

Use vue-cli plugin to add storybook to a fresh Vue project.

Follow instructions in the 'Getting Started' guide on setting up 'Snapshot Testing' (with Storyshots plugin).

Run:

npm run test:unit

Get:

ENOENT: no such file or directory, lstat '/path/to/project/.storybook'

Expected behavior
A clear and concise description of what you expected to happen.

Tests to run.

Screenshots
If applicable, add screenshots to help explain your problem.

N/A.

Code snippets
If applicable, add code samples to help explain your problem.

N/A.

System:

• OS: Ubuntu 18.10
• Device: Desktop
• Browser: Chrome
• Framework: Vue
• Addons: N/A.
• Version:

    "@storybook/addon-actions": "^4.1.0",
    "@storybook/addon-knobs": "^4.1.0",
    "@storybook/addon-links": "^4.1.0",
    "@storybook/addon-notes": "^4.1.0",
    "@storybook/addon-storyshots": "^4.1.11",
    "vue-cli-plugin-storybook": "^0.5.1",

Additional context
Add any other context about the problem here.

N/A.

[tmeasday]

Hi @CrashyBang - any chance you could upload what you have to github?

[tmeasday]

Or at least what your scripts section of package.json looks like?

[chopfitzroy]

Hey @tmeasday,

Sure here is the scripts section:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "storybook:build": "vue-cli-service storybook:build -c testing/config/storybook",
    "storybook:serve": "vue-cli-service storybook:serve --ci -p 8081 -c testing/config/storybook",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
}

And here is my jest.config.js (tests are being run by jest as per tutorial):

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["/node_modules/(?!(@storybook/.*\\.vue$))"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/testing/suites/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/"
};

And here is my babel.config.js (had to make ES5 compliant to work with Cypress):

module.exports = api => {
  // No ES6 https://github.com/cypress-io/cypress/issues/2945
  const test = {
    presets: ["@vue/app"]
  };

  if (api.env("test")) test.plugins = ["require-context-hook"];

  return test;
};

And for your reference the directory structure of testing/:

├── config
│   └── storybook
│       ├── addons.js
│       └── config.js
├── data
│   ├── charts.data.js
│   ├── collapsable-list.data.js
│   ├── event-drawer.data.js
│   └── graph.data.js
├── stories
│   ├── charts.stories.js
│   ├── collapsable-list.stories.js
│   ├── date-range.stories.js
│   ├── event-drawer.stories.js
│   ├── graph.stories.js
│   └── index.stories.js
└── suites
    ├── e2e
    │   ├── plugins
    │   │   └── index.js
    │   ├── specs
    │   │   └── test.js
    │   └── support
    │       ├── commands.js
    │       └── index.js
    └── unit
        ├── graph.spec.js
        └── storybook.spec.js

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[chopfitzroy]

Still experiencing this issue, have been unable to figure out the cause.

[chopfitzroy]

Tried this in another project using the updated plugins:

"@storybook/addon-actions": "^5.0",
"@storybook/addon-knobs": "^5.0",
"@storybook/addon-links": "^5.0",
"@storybook/addon-notes": "^5.0",
"vue-cli-plugin-storybook": "^0.6.1",

I thought it may be related to runnning the project in a Docker container, but even running it locally (tried nuking and re-installing node_modules as well) didn't appear to have any difference.

Cheers!

[tmeasday]

Hi @CrashyBang -- sorry I didn't see your messages above (?)

I think your issue here is you have put your storybook config in a non-standard location (config/storybook). Try passing { configPath: './config/storybook' } to the initStoryshots function.

[chopfitzroy]

Hey @tmeasday,

Yep that sorted it, I had to use { configPath: './testing/config/storybook' } but now everything works accordingly.

Cheers!