eslint-plugin-storybook icon indicating copy to clipboard operation
eslint-plugin-storybook copied to clipboard

Await expect linting error

Open serferdinand2 opened this issue 2 years ago • 1 comments
trafficstars

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

serferdinand2 avatar Jan 03 '23 22:01 serferdinand2

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

slashwhatever avatar Apr 26 '23 07:04 slashwhatever