Jest-styled-components: Incompatibility with Storybook: "Can't resolve 'fs'"

[GillesDebunne]

Repro steps:

Start a new cra project from scratch:

create-react-app myProject
cd myProject
yarn start
^C

Then add storybook

npm i -g @storybook/cli
getstorybook
yarn run storybook
^C

Everything works as expected.

Then yarn add --dev jest-styled-components and edit src/stories/index.js, to add

import "jest-styled-components";

after the other imports.

Run yarn run storybook again. It fails with this error message:

ERROR in ./node_modules/css/lib/stringify/source-map-support.js
Module not found: Error: Can't resolve 'fs' in '/private/tmp/jsc-bug/node_modules/css/lib/stringify'
 @ ./node_modules/css/lib/stringify/source-map-support.js 10:9-22
 @ ./node_modules/css/lib/stringify/index.js
 @ ./node_modules/css/index.js
 @ ./node_modules/jest-styled-components/src/styleSheetSerializer.js
 @ ./node_modules/jest-styled-components/src/index.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./node_modules/jest-styled-components/src/utils.js
Module not found: Error: Can't resolve 'styled-components' in '/private/tmp/jsc-bug/node_modules/jest-styled-components/src'
 @ ./node_modules/jest-styled-components/src/utils.js 2:29-57
 @ ./node_modules/jest-styled-components/src/index.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./node_modules/jest-styled-components/src/utils.js
Module not found: Error: Can't resolve 'styled-components/lib/models/StyleSheet' in '/private/tmp/jsc-bug/node_modules/jest-styled-components/src'
 @ ./node_modules/jest-styled-components/src/utils.js 3:19-69
 @ ./node_modules/jest-styled-components/src/index.js
 @ ./src/stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Runnning on a mac, with yarn 1.1.0, cra 1.4.0, jest-styled-components 4.6.0, storybook 3.2.11

package.json.zip

[MicheleBertoli]

Hello @GillesDebunne, thanks for opening the issue.
I'm not sure why you are adding jest-styled-components to your stories file, but it doesn't seem the right place.
Please check out storyshots, and this example of how to setup storybook with jest-styled-components from @terrencewwong.
Thank you very much!

[GillesDebunne]

Thanks for this response, @MicheleBertoli

The example indeed shows how to mix storyshots and jest-styled-components : add the import in the storyshots.test.js file, and it works.

However, in my case, I use a different solution inspired by storyshots, where each storybook story file is also a snapshot test. Basically, each story I create is also a snapshot test. As a result, I get a cleaner one snapshot per story structure.

This is why I created this simple repro case, where stories and import are mixed, and which highlights the problem.

Storyshots has an issue to create one snapshot per file. I will see if they face the same issue and how they solve it.