use-storybook-testing-library rule should recommend @storybook/test and not @storybook/testing-library

[devmattrick]

Describe the bug This caused some confusion for me because my imports were updated to use @storybook/testing-library, which was not installed. When I installed @storybook/testing-library, I got a deprecation warning telling me to use @storybook/test instead. It'd be nice to have an option to configure which npm package should be used for this and ideally it should default to @storybook/test going forwards.

To Reproduce Steps to reproduce the behavior:

1. Write an import like import {/* ... */} from '@testing-library/react'
2. Run eslint --fix
3. Observe that the import has been updated to import { /* ... */} from '@storybook/testing-library

Expected behavior The import should be updated to @storybook/test but ideally should be configurable to use either @storybook/test or @storybook/testing-library.

Screenshots N/A

Additional context As a temporary workaround to this, you can add the following rule to your ESLint config to disallow the use of @testing-library/react:

    'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: '@testing-library/react',
            message: 'Please use @storybook/test instead',
          },
        ],
      },
    ],

[yannbf]

Hey @devmattrick that's a great point! I updated the rule (and it's documentation) so the message is a bit more specific:

You should import the functions from `@storybook/test` (preferrably) or `@storybook/testing-library` instead.

but ideally the rule should detect whether the user has the @storybook/test package and use it instead. It's a little tricky as the rule should still respect when the user is using the legacy packages (@storybook/testing-library, @storybook/jest). I'll try to come up with a fix for this!