Skip to content
This repository was archived by the owner on Nov 7, 2025. It is now read-only.
This repository was archived by the owner on Nov 7, 2025. It is now read-only.

await-interactions does not work with import from @storybook/test #168

@devpeerapong

Description

@devpeerapong

Describe the bug
The await-interactions rule in eslint-plugin-storybook doesn't flag missing expect and userEvent imports when using the new @storybook/test package introduced in Storybook 8.0.

To Reproduce
Steps to reproduce the behavior:

  1. Clone this repository https://github.com/devpeerapong/eslint-storybook-await-interactions-rule.
    It's setup with react-vite and storybook
  2. run git checkout HEAD~1, to go back to the bug commit
  3. run pnpm install to use the unpatched eslint-plugin-storybook
  4. run pnpm eslint src/stories/Button.stories.js
  5. Observe no error reported from ESLint

Expected behavior
ESLint should reports an error on line 32 and 33

Additional context
Previously, the await-interactions rule checked for imports from @storybook/testing-library and @storybook/jest. With Storybook 8.0, the single @storybook/test package replaces these for writing tests. However, the ESLint plugin hasn't been updated to reflect this change.

const isUserEventFromStorybookImported = (node: TSESTree.ImportDeclaration) => {
return (
node.source.value === '@storybook/testing-library' &&
node.specifiers.find(
(spec) =>
isImportSpecifier(spec) &&
spec.imported.name === 'userEvent' &&
spec.local.name === 'userEvent'
) !== undefined
)
}
const isExpectFromStorybookImported = (node: TSESTree.ImportDeclaration) => {
return (
node.source.value === '@storybook/jest' &&
node.specifiers.find(
(spec) => isImportSpecifier(spec) && spec.imported.name === 'expect'
) !== undefined
)
}

After applying this patch, to include the check for @storybook/test, the error is now showing properly.

         const isUserEventFromStorybookImported = (node) => {
-            return (node.source.value === '@storybook/testing-library' &&
+            return (['@storybook/testing-library', '@storybook/test'].includes(node.source.value) &&
                 node.specifiers.find((spec) => (0, ast_1.isImportSpecifier)(spec) &&
                     spec.imported.name === 'userEvent' &&
                     spec.local.name === 'userEvent') !== undefined);
         };
         const isExpectFromStorybookImported = (node) => {
-            return (node.source.value === '@storybook/jest' &&
+            return (['@storybook/jest', '@storybook/test'].includes(node.source.value) &&
                 node.specifiers.find((spec) => (0, ast_1.isImportSpecifier)(spec) && spec.imported.name === 'expect') !== undefined);
         };

https://github.com/devpeerapong/eslint-storybook-await-interactions-rule/blob/736a8cf045a264ec25d0dffb5bf257fbb0c9412a/patches/eslint-plugin-storybook.patch#L8-L20

You can try these by running git checkout main (if you already follow the reproduction step)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions