storybookjs / test-runner

🚕 Turn stories into executable tests
https://storybook.js.org/docs/writing-tests/interaction-testing
MIT License
229 stars 72 forks source link

[Bug]: Can't rely on isTestRunner check when preconfiguring viewport size #463

Open gromaco opened 4 months ago

gromaco commented 4 months ago

Describe the bug

After implementing the Preconfiguring viewport size recipe, we faced an issue with StorybookTestRunner not being present in the userAgent so the StorybookTestRunner check fails:

const isTestRunner = window.navigator.userAgent.match(/StorybookTestRunner/); // null

To Reproduce

To reproduce the issue, it's enough to call getStoryContext(page, story) in the preVisit

async preVisit(page, story) {
    await getStoryContext(page, story)
}

Then run tests for the stories containing components with isTestRunner check:

const isTestRunner = window.navigator.userAgent.match(/StorybookTestRunner/); // null

System

Storybook Environment Info:

  System:
    OS: Linux 6.7 Arch Linux
    CPU: (4) x64 AMD EPYC 7R13 Processor
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn <----- active
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  npmPackages:
    @storybook/addon-actions: ^7.6.4 => 7.6.13
    @storybook/addon-designs: ^7.0.7 => 7.0.9
    @storybook/addon-essentials: ^7.6.4 => 7.6.13
    @storybook/addon-interactions: ^7.6.4 => 7.6.13
    @storybook/addon-links: ^7.6.4 => 7.6.13
    @storybook/react: ^7.6.4 => 7.6.13
    @storybook/react-webpack5: ^7.6.4 => 7.6.13
    @storybook/test: ^7.6.4 => 7.6.13
    @storybook/test-runner: ^0.18.0 => 0.18.0
    chromatic: ^11.0.0 => 11.0.0
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.6.4 => 7.6.13

Additional context

Checking for the StorybookTestRunner in preVisit shows that it's not present in the userAgent only for the first pass(story) in the suit. But it becomes a part of the userAgent for the subsequent stories.

async preVisit(page, story) {
    // Uncomment the following line to see console logs from the browser
    page.on('console', (msg) => console.log(msg.text()))

    await page.evaluate((context) => {
      const isTestRunner =
        window.navigator.userAgent.match(/StorybookTestRunner/)
      console.log(isTestRunner)
    })
}