Open domarmstrong opened 1 year ago
I've had a further dig in to this and it appears to be because when running in Jest the dist/styled-components.cjs.js
is used, and when built with webpack the ./dist/styled-components.browser.esm.js
(or cjs) files are used. The styled-components.cjs.js
is compiled to have a hardcoded value that isServer is true. Presumably, this should still be a runtime check, not a static value.
styled-components.cjs.js
ve = { isServer: !0, useCSSOMInjection: !f },
styled-components.browser.esm.js
f = 'undefined' != typeof window && 'HTMLElement' in window,
Ee = { isServer: !f, useCSSOMInjection: !y },
I've managed to get this working by adding a manual mapping in our jest config file. This wasn't previously required and I'm not sure it's very intuitive.
jest.config.js
...
moduleNameMapper: {
'styled-components': 'styled-components/dist/styled-components.browser.cjs.js',
},
...
Thanks @domarmstrong
Replicated the issue in a fairly clean repository using the testing library which is using jsdom: https://github.com/dejanvasic85/jest-styled-components
Your jest config fixes the problem for the moment. Great find π π₯
apparently this issue also happened on v5.2.0 https://github.com/styled-components/styled-components/issues/3262
The solution of jest config override negates the use of Jest Styled Components which helps with snapshot testing. Class names are always changing in the snapshots, but we're expecting the styles to be rendered at the top which is the responsibility of this tool. π’
Environment
Reproduction
Repo https://github.com/domarmstrong/styled-components-v6-repro Sandbox https://codesandbox.io/p/sandbox/styled-components-6-cloud-forked-q2m4pm
Steps to reproduce
See reproduction.
It works fine in a non-cloud version of the same sandbox https://codesandbox.io/s/styled-components-6-kqszxg. But fails when run in the cloud version linked above.
Note: the reproduction env is abstracted by react-scripts. However our application uses jest/jsdom env directly with the same behavior, so this issue should not be related to that setup.
Expected Behavior
When running in jest with jsdom a
<style>
tag is added to the document head.Actual Behavior
When running in jest with jsdom no style tag is inserted.