eslint-plugin-storybook
eslint-plugin-storybook copied to clipboard
Await expect linting error
Describe the bug When using expect or userEvent TS and eslint seem to not agree on what needs to be used
To Reproduce
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const btn = canvas.getByRole('button');
const style = window.getComputedStyle(btn);
await userEvent.click(btn);
// await shows a TS error "'await' has no effect on the type of this expression.ts(80007)"
expect(btn).toBeVisible();
expect(style.backgroundColor).toBe('rgb(255, 233, 120)');
expect(btn.innerText).toBe('Large');
expect(btn.offsetHeight).toBe(48);
// all of the expect functions are lining with a message "Interaction should be awaited: toBeeslint[storybook/await-interactions](https://github.com/storybookjs/eslint-plugin-storybook/blob/main/docs/rules/await-interactions.md)"
},
Expected behavior
"Expect" functions do not need to be awaited to work yet eslint is asking for them to be awaited. If you await them the 80007 TS error appears
"Expect" functions do not need to be awaited
From the Storybook interactions addon docs:
In order to enable step-through debugging, calls to userEvent., fireEvent, findBy, waitFor* and expect have to be await-ed. While debugging, these functions return a Promise that won't resolve until you continue to the next step."
That said, even when I follow these rules, the eslint plugin fails to highlight misuse of await (or absence of await)