-
Notifications
You must be signed in to change notification settings - Fork 69
await-interactions does not work with import from @storybook/test #168
Description
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:
- Clone this repository https://github.com/devpeerapong/eslint-storybook-await-interactions-rule.
It's setup withreact-viteandstorybook - run
git checkout HEAD~1, to go back to the bug commit - run
pnpm installto use the unpatchedeslint-plugin-storybook - run
pnpm eslint src/stories/Button.stories.js - 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.
eslint-plugin-storybook/lib/rules/await-interactions.ts
Lines 132 to 153 in d5a9ce1
| 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);
};You can try these by running git checkout main (if you already follow the reproduction step)