-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jest doesn't works with JSX which imports CSS #3094
Comments
@maximderbin Thanks! |
@maximderbin Thank you! It resolves my issue by adding |
@svipben @maximderbin @simonxl where do I have to add this moduleNameMapper? |
@sarahmarciano
|
I solved this by using the
After this you will need to create the two files as described below
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
But you will need to install
For more information. You can refer to the jest docs |
Note that the approaches recommended here will not work if your CSS modules export values which your JSX files depend on. Most guides assume you're only using CSS modules to export class names. I wish there was a guide for properly mocking CSS modules. |
@matthew-dean what do you mean "properly mocking CSS modules"? Can you describe your use case a bit more? I have great experience using |
:export {
sizeMobile: $size-mobile / 1px;
sizePhablet: $size-phablet / 1px;
sizeSmallTablet: $size-small-tablet / 1px;
sizeTablet: $size-tablet / 1px;
sizeDesktop: $size-desktop / 1px;
sizeLargeDesktop: $size-large-desktop / 1px;
} import styles from './variables.scss'
const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
return <Tile style={{width: tileSize}} />
} This is a contrived example, just demonstrating that you can share constants (values) between CSS modules and JS, and that conditional rendering or dynamic props can be assigned based on values. But with |
Incidentally, I WAS able to mock the CSS module successfully like this: const styles = require('styles/variables.scss')
jest.mock('styles/variables.scss', () => {
return {
sizePhablet: 500,
sizeSmallTablet: 768,
sizeTablet: 1024,
sizeDesktop: 1440,
sizeLargeDesktop: 1920
}
}) Hopefully that's useful for someone else who is using all the features of CSS modules and, like me, was tearing their hair out at all the default "just use |
I solved this problem by using 'jest-transform-css'.
Now css files will get transpiled just like js files did. |
@matthew-dean where did you write the mock the CSS module and how do you reference it to jest? |
I'm using Babel After following the above advice, I'm still getting this error when I try to
As per the article linked above, this is in my
and in the root directory, I have
Lastly, my
Which in turn configures Enzyme:
|
I followed solutions given above but none of them seems to be working for me |
I was able to resolve this by adding |
same here @fthomas82 |
It worked for me. Thanks!!! |
Thanks, bro @krajasekhar |
I added suggested config to For reference here is my
|
I have to import a raw css in my code
I also modified jest config still, I am getting test error on the import line. Any idea how to mock raw import? |
Solution of @import Unexpected token=:) Install package: Add in jest.config.js
|
If somebody arrives here:
|
Thanks to everybody who presented a solution and specially to you @ShadOoW! It was a kind of logic thing but I was missing that ... config file will be used over settings in package.json In short, for new comers, what worked to me was an union of multiple solutions presented by our community dream team:
Tks Everyone ! |
it worked for me when I add the moduleNameMapper in the jest.config.ts, not the package.json |
If you are using Jest for images snapshots there is not much choice to parse SCSS into CSS and inject it in the tests. I tried "sass-jest" and "sass-jest-transform" and they didn't work. I'm wondering if I will have to write my own? |
I move my config from jest.config.js to my package.json and worked |
I came across this issue when importing CSS files from
This was my configuration:
While it works fine with local CSS files, It didn't for the imports above. The reason is that transformIgnorePatterns includes
|
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
If
app.jsx
haveimport './app.css';
it's impossible to run test, I got this error:What is the expected behavior?
To run tests without error...
Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.
OS: Linux Ubuntu 16.04
Jest: Latest
Yarn: Latest
Node: Latest
babel-jest
: Latest.babelrc:
jest: NODE_ENV=client jest -u
P.S. Everything runs well if I comment/remove
import './app.css';
The text was updated successfully, but these errors were encountered: