[Bug]: @storybook/test exports any types for userEvent

[skratchdot]

Describe the bug

In v8, all the types for userEvent from @storybook/test are typed as any instead of keeping/wrapping the @testing-library/user-event types during instrumentation.

@storybook/test:

@testing-library/user-event:

To Reproduce

on a codebase that implements the @typescript-eslint/no-unsafe-call lint rule, upgrade from @storybook/jest and @storybook/testing-library to use @storybook/test instead. notice all the new eslint errors:

error  Unsafe call of an `any` typed value  @typescript-eslint/no-unsafe-call

due to userEvent

System

➜ npx storybook@latest info

Storybook Environment Info:

  System:
    OS: macOS 14.2
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v18.18.2/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 17.2
  npmPackages:
    @storybook/addon-a11y: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/addon-coverage: ^1.0.0 => 1.0.0
    @storybook/addon-essentials: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/addon-interactions: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/addon-links: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/blocks: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/nextjs: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/react: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/test: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    @storybook/test-runner: ^0.16.1--canary.c6e45e4.0 => 0.16.1--canary.c6e45e4.0
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^8.0.0-alpha.3 => 8.0.0-alpha.3
    storybook-addon-rtl: ^0.5.0 => 0.5.0

Additional context

No response

[valentinpalkovic]

@kasperpeulen I am pretty sure you would have avoided any if possible. Do you know why we type all these properties with any?

[Christian-Garrison]

I'm also getting this error, here are some relevant screenshots and using latest version of @storybook/test: ^7.6.6

[skratchdot]

I updated my description and title to point out that this is an issue for v8. i think v7.6 "works". actually, @Christian-Garrison pointed out that 7.6 is not working.

[Christian-Garrison]

@skratchdot Hey-O so v7.6.x is the current version I've been using and it has the same type issues.

Feel free to refer to my comment to update the title and description.

[jalooc]

Same here. The userEvent type looks correct though: in spite of hovering indicating any, when I follow the definition, the IDE gets me to a proper one:

->

So there seems to be a problem with eslint/TS processing the referenced definitions.

[jalooc]

Can be related to this: testing-library/user-event#978.

@testing-library/[email protected] alone also throws weird TS errors:

TS7016: Could not find a declaration file for module '@testing-library/user-event'. 'xxx/node_modules/@testing-library/user-event/dist/index.mjs' implicitly has an 'any' type.   There are types at 'xxx/node_modules/@testing-library/user-event/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@testing-library/user-event' library may need to update its package.json or typings.

That error is fixed by the version 14.5.2, but sadly pinning it in the project so that @storybook/test uses that version as well, does not help in getting rid of the anys error.

[jalooc]

Ok I managed to fix it with this change:

diff --git a/node_modules/@storybook/test/dist/index.d.ts b/node_modules/@storybook/test/dist/index.d.ts
index 880b7ec..4f3174e 100644
--- a/node_modules/@storybook/test/dist/index.d.ts
+++ b/node_modules/@storybook/test/dist/index.d.ts
@@ -3,7 +3,7 @@ import * as matchers from '@testing-library/jest-dom/matchers';
 import { MaybeMocked, MaybeMockedDeep, MaybePartiallyMocked, MaybePartiallyMockedDeep } from '@vitest/spy';
 export * from '@vitest/spy';
 export { fn, isMockFunction, spies as mocks, spyOn } from '@vitest/spy';
-import * as _testing_library_user_event_dist_types_setup_directApi from '@testing-library/user-event/dist/types/setup/directApi';
+import _testing_library_user_event_dist_types_setup_directApi from '@testing-library/user-event';
 import * as _testing_library_user_event_dist_types_setup_setup from '@testing-library/user-event/dist/types/setup/setup';
 import * as domTestingLibrary from '@testing-library/dom';

[skratchdot]

@jalooc - thanks!

i used the following package.json changes:

  "pnpm": {
    "overrides": {
      "@testing-library/user-event": "^14.5.2"
    },
    "patchedDependencies": {
      "@storybook/[email protected]": "patches/@[email protected]"
    }
  }

the patchedDependencies section was auto-added when i ran pnpm patch @storybook/[email protected].

my patches/@[email protected] file is:

diff --git a/dist/index.d.ts b/dist/index.d.ts
index 880b7ec16674fb512a2e21f85256cd0298ce1060..377a2835b153418bd7142846c08655635e80e05d 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -3,8 +3,7 @@ import * as matchers from '@testing-library/jest-dom/matchers';
 import { MaybeMocked, MaybeMockedDeep, MaybePartiallyMocked, MaybePartiallyMockedDeep } from '@vitest/spy';
 export * from '@vitest/spy';
 export { fn, isMockFunction, spies as mocks, spyOn } from '@vitest/spy';
-import * as _testing_library_user_event_dist_types_setup_directApi from '@testing-library/user-event/dist/types/setup/directApi';
-import * as _testing_library_user_event_dist_types_setup_setup from '@testing-library/user-event/dist/types/setup/setup';
+import _userEvent from '@testing-library/user-event';
 import * as domTestingLibrary from '@testing-library/dom';
 
 type Promisify<Fn> = Fn extends (...args: infer A) => infer R ? (...args: A) => R extends Promise<any> ? R : Promise<R> : Fn;
@@ -152,26 +151,7 @@ declare const waitFor: typeof domTestingLibrary.waitFor;
 declare const waitForElementToBeRemoved: typeof domTestingLibrary.waitForElementToBeRemoved;
 declare const within: typeof domTestingLibrary.getQueriesForElement;
 declare const prettyFormat: typeof domTestingLibrary.prettyFormat;
-declare const userEvent: {
-    readonly setup: typeof _testing_library_user_event_dist_types_setup_setup.setupMain;
-    readonly clear: typeof _testing_library_user_event_dist_types_setup_directApi.clear;
-    readonly click: typeof _testing_library_user_event_dist_types_setup_directApi.click;
-    readonly copy: typeof _testing_library_user_event_dist_types_setup_directApi.copy;
-    readonly cut: typeof _testing_library_user_event_dist_types_setup_directApi.cut;
-    readonly dblClick: typeof _testing_library_user_event_dist_types_setup_directApi.dblClick;
-    readonly deselectOptions: typeof _testing_library_user_event_dist_types_setup_directApi.deselectOptions;
-    readonly hover: typeof _testing_library_user_event_dist_types_setup_directApi.hover;
-    readonly keyboard: typeof _testing_library_user_event_dist_types_setup_directApi.keyboard;
-    readonly pointer: typeof _testing_library_user_event_dist_types_setup_directApi.pointer;
-    readonly paste: typeof _testing_library_user_event_dist_types_setup_directApi.paste;
-    readonly selectOptions: typeof _testing_library_user_event_dist_types_setup_directApi.selectOptions;
-    readonly tripleClick: typeof _testing_library_user_event_dist_types_setup_directApi.tripleClick;
-    readonly type: typeof _testing_library_user_event_dist_types_setup_directApi.type;
-    readonly unhover: typeof _testing_library_user_event_dist_types_setup_directApi.unhover;
-    readonly upload: typeof _testing_library_user_event_dist_types_setup_directApi.upload;
-    readonly tab: typeof _testing_library_user_event_dist_types_setup_directApi.tab;
-};
-
+declare const userEvent: typeof _userEvent;
 declare const expect: Expect;
 
 export { buildQueries, clearAllMocks, configure, createEvent, expect, findAllByAltText, findAllByDisplayValue, findAllByLabelText, findAllByPlaceholderText, findAllByRole, findAllByTestId, findAllByText, findAllByTitle, findByAltText, findByDisplayValue, findByLabelText, findByPlaceholderText, findByRole, findByTestId, findByText, findByTitle, fireEvent, getAllByAltText, getAllByDisplayValue, getAllByLabelText, getAllByPlaceholderText, getAllByRole, getAllByTestId, getAllByText, getAllByTitle, getByAltText, getByDisplayValue, getByLabelText, getByPlaceholderText, getByRole, getByTestId, getByText, getByTitle, getConfig, getDefaultNormalizer, getElementError, getNodeText, getQueriesForElement, getRoles, getSuggestedQuery, isInaccessible, logDOM, logRoles, mocked, prettyDOM, prettyFormat, queries, queryAllByAltText, queryAllByAttribute, queryAllByDisplayValue, queryAllByLabelText, queryAllByPlaceholderText, queryAllByRole, queryAllByTestId, queryAllByText, queryAllByTitle, queryByAltText, queryByAttribute, queryByDisplayValue, queryByLabelText, queryByPlaceholderText, queryByRole, queryByTestId, queryByText, queryByTitle, queryHelpers, resetAllMocks, restoreAllMocks, screen, userEvent, waitFor, waitForElementToBeRemoved, within };

[skratchdot]

I am still seeing errors even with 8.0.0-alpha.10 so I commented here:
#25547 (comment)

[manavm1990]

Respectfully @kasperpeulen NS 😕 why this is closed? Have I missed something?

import { userEvent, waitForElementToBeRemoved, within } from "@storybook/test";

"@storybook/addon-essentials": "^7.6.16",
    "@storybook/addon-interactions": "^7.6.16",
    "@storybook/addon-links": "^7.6.16",
    "@storybook/blocks": "^7.6.16",
    "@storybook/react": "^7.6.16",
    "@storybook/react-vite": "^7.6.16",
    "@storybook/test": "^7.6.16",

[kasperpeulen]

I just merged a PR that should fix this:
#25853

Shall be part of beta.3.