Doesn't support SCSS import in preview

[kluplau]

I use SCSS and I import my stylesheet in ./storybook/preview.js

import "../src/styles/globals.scss";

This will break, even though both Jest and Storybook handles SCSS when used before setting up storybookjs/testing-react.

    C:\PROJECT_PATH\src\styles\globals.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){@import "./utils.scss";
                                                                                      ^

I expected storybookjs/testing-react to use the same configuration as jest and Storybook, and support what ever configuration they support.

[yannbf]

Hey @kluplau thanks for raising this issue. @storybook/testing-react is not really a testing tool per se, it justs provides a utility function that helps you compose your stories to use them in your tests. So essentially whatever support you're looking for (like scss) should be part of the jest configuration. The lib will not connect any storybook babel/webpack to your tests.

Question: If you were to test (without using this lib) a component that imported a scss file, would it work?

[kluplau]

I'm just composing the stories as instructed in the readme, and it breaks if Storybook uses SCSS.

Yes Jest tests with RTL works if I test a component that uses SCSS but breaks when using the lib.

[yannbf]

Hey there! I wanted to thank you for using @storybook/testing-react!

@storybook/testing-react has been promoted to a first-class Storybook functionality in Storybook 7. This means that you no longer need this package, and this package will not be worked on anymore (especially regarding Storybook 6, unless there are security issues). Instead, you can import the same utilities, but from the @storybook/react package. Additionally, the internals of composeStories and composeStory have been revamped, so the way a story is composed is way more accurate, and it's possible this issue doesn't happen there anymore.

Please do the following:

1. Upgrade to Storybook 7 if you haven't already
2. Uninstall @storybook/testing-react
3. Update your imports from @storybook/testing-react to @storybook/react

// Component.test.jsx
- import { composeStories } from '@storybook/testing-react';
+ import { composeStories } from '@storybook/react';

// setup-files.js
- import { setProjectAnnotations } from '@storybook/testing-react';
+ import { setProjectAnnotations } from '@storybook/react';

For now, I'll be closing this issue. Please, if even after migrating, you are still experiencing issues, report them in the Storybook monorepo.

Thank you so much for this journey!