storybookjs / eslint-plugin-storybook

🎗Official ESLint plugin for Storybook
MIT License
238 stars 42 forks source link

Await expect linting error #114

Open serferdinand2 opened 1 year ago

serferdinand2 commented 1 year ago

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

slashwhatever commented 1 year ago

"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)