[Bug] generated testMatch assumes Storybook working dir matches Jest rootDir

[FokkeZB]

Describe the bug

A clear and concise description of what the bug is.

Steps to reproduce the behavior

1. Create a monorepo that contains stories in multiple packages, but .storybook only in one of them, sourcing from all packages.
2. Run yarn test-runner from the package that has .storybook notice only stories in that package get found.
3. Eject and set rootDir: '../..' hoping that Jest finds the other stories as well.
4. Run yarn test-runner again and notice the absolute testMatch paths now end up 2 levels to high.

Expected behavior

Test-runner should be able to run any story that the Storybook can build.

Screenshots and/or logs

@yannbf has details.

Environment

Only relevant version is that of @storybook/test-runner, which is 0.2.0.

Additional context

The assumption that the Storybook working dir matches the Jest rootDir is baked into

test-runner/src/util/getStorybookMetadata.ts

Line 20 in 668e56c

.map((dir) => '<rootDir>/' + relative(workingDir, dir))

We can fix this by either:

• Getting our hands on the rootDir value and make the paths relative to that.
• Drop <rootDir> and make the paths absolute.

The second one might make most sense since Jest will ultimately make them absolute anyway.

However, even if we fix this, Jest isn't really made to run across multiple packages and it's very likely that we run into other issues, like multiple packages defining the same __mocks__.

An alternative is to use --stories-json but that has cons like not having --watch.

Perhaps it's best to consider sourcing stories from other packages a bad-practice (if it isn't already) and steer towards one storybook per package, optionally composed.

[stuthib]

Adding more info based on the issue I am running into -

I have a few stories in .storybook/stories folder and most other stories in src/components folder. I see this error for the ones that are in .storybook/stories/ when I run npx test-storybook --coverage locally.

[sw-tracker]

I am using yarn with workspaces and I have the stories in a different folder to where storybook is installed (wanting to keep track of my dependencies).

When I run yarn start-storybook, it works and it finds the stories without any issue.

// main.js
module.exports = {
  stories: [
    "../../web-components/src/**/*.stories.mdx",
    "../../web-components/src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-coverage',
  ],
  framework: "@storybook/react",
  features: {
    interactionsDebugger: true,
  },
}

But when I run yarn test-storybook I get a Pattern: - 0 matches error.

[sw-tracker]

I am using yarn with workspaces and I have the stories in a different folder to where storybook is installed (wanting to keep track of my dependencies).

When I run yarn start-storybook, it works and it finds the stories without any issue.

// main.js
module.exports = {
  stories: [
    "../../web-components/src/**/*.stories.mdx",
    "../../web-components/src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-coverage',
  ],
  framework: "@storybook/react",
  features: {
    interactionsDebugger: true,
  },
}

But when I run yarn test-storybook I get a Pattern: - 0 matches error.

Ok, I ended up ejecting and doing this:

const { getJestConfig } = require('@storybook/test-runner');

module.exports = {
  // The default configuration comes from @storybook/test-runner
  ...getJestConfig(),
  /** Add your own overrides below
   * @see https://jestjs.io/docs/configuration
   */
  rootDir: '../web-components/'
};

[github-actions]

🚀 Issue was released in v0.13.0 🚀