Test runner only recognizes "*.stories.tsx"

[amywangg]

Using @storybook/test-runner v0.3.0 and jest v27 In my main.js my stories are described as such and it runs fine with yarn storybook

I have multiple story files and when I run test-runner for just *.stories.tsx it works fine As soon as I use I get this error

However I have tried, as a test, to change the name of the file from Accordion.fixtures.tsx -> Accordion.stories.tsx (there wasn't one existing) and it works fine. Same holds true for Accordion.examples.tsx -> Accordion.stories.tsx

Wondering what might be the issue....

[amywangg]

Fixed by adding transform options in test-runner-jest.config.js

Though this is still a bug.

[gabrielperales]

Hi, I faced the same issue, and I explained here how I fixed it https://github.com/storybookjs/test-runner/issues/249.

I was coming to open an issue to add that documentation to the README or to find a way to fix it.

[yannbf]

Hey @gabrielperales thanks for that! Would you mind making a PR to introduce some documentation for this? Thank you so much <3

[StephanBijzitter]

I just ran into this as well.

getJestConfig returns a proper value fortestMatch (which for me to is to write it as .story.tsx), but the transform value still references .stories.

  testMatch: [ '<rootDir>/src\\react\\**\\*.stories.tsx' ],
  transform: {
    '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
    '^.+\\.[jt]sx?$': <redacted>\\.yarn\\__virtual__\\@swc-jest-virtual-61723854d4\\0\\cache\\@swc-jest-npm-0.2.26-890d01518c-771821ed08.zip\\node_m
odules\\@swc\\jest'
  },

Perhaps the config could take testMatch, strip the <rootDir>/, convert the globs to regular expressions (glob-to-regexp?) and add them to the transform object?

[StephanBijzitter]

Didn't get the above to work easily, but this works for me (and maybe for more people):

.storybook/main.js:

stories: ["../src/react/**/*.story.tsx"],

test-runner-jest.config.js:

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

const jestConfig = getJestConfig();

/**
 * @type {import('@jest/types').Config.InitialOptions}
 */
module.exports = {
    ...jestConfig,
    transform: jestConfig.testMatch.reduce((result, matcher) => {
        const transformMatcher = matcher
            .replace(/(^.+?\*)(\.\w+\.\w+)/, '$2$')
            .replace(/\./g, '\\.');

        return {
            [transformMatcher]: '@storybook/test-runner/playwright/transform',
            ...result
        };
    }, jestConfig.transform)
};

[github-actions[bot]]

:rocket: Issue was released in v0.14.0 :rocket: