Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
mock-css-modules
Advanced tools
Webpack loaders are great. With them, you can
require()
just about any file and the loaders will take care of transpiling
into javascript.
CSS Modules are great because you can write CSS for each of your components
without worrying about rules from one stepping on the rules of another. The
aforementioned webpack loaders (the css-loader
in particular) will let you require()
your CSS and return a nice map of
original class names to generated CSS Module class names so you can do
something like:
import styles from './styles.css';
import {render} from 'react-dom';
render(<h1 class={styles.myClass}>Hello, World!</h1>, document.body);
The problem is testing... your testing toolchain (mocha perhaps) doesn't know how to require CSS files. This inevitably leads to a syntax error while node tries to parse the CSS as if it was javascript.
There are several solutions to this problem. The most common solutions either
attempt to parse the CSS faithfully or attempt to ignore the CSS require()
altogether.
In the first case, you're just complicating things and wasting time. In my
automated tests, I don't need to know that myClass
is going to become
_23_aKvs-b8bW2Vg3fwHozO
, so why should I waste the time to parse the CSS to
find that out? Further, if there's an error in my CSS, the parsing will fail
and cause my component test to fail... is that where the failure belongs? I
dunno... maybe, maybe not...
In the second case, all of my class names become empty strings in my automated
tests. While it's true that I don't need to know exactly what my class names
will become after transpiling, I might want to be able to test that there is
some class and I can't do that if just make my CSS require()
s return null.
mock-css-modules' solution is somewhere between the former and the latter.
mock-css-modules registers a handler for requiring CSS files. When node comes
upon a require()
for a CSS file, it will run mock-css-modules' handler which
will return a Proxy
object. This Proxy object will trap getters and return the name of the
requested property as a string. So, for example:
import styles from './styles.css';
styles.myClass
=> "myClass"
styles.anotherClass
=> "anotherClass"
etc ...
This gives all of our classes names without the overhead of parsing the actual CSS files. And since code that is using CSS Modules shouldn't be making any assumptions about the names of the generated classes, these values are just as valid as the real ones so they shouldn't cause any issues.
Install with npm:
npm install --save-dev mock-css-modules
Simply require("mock-css-modules")
before any CSS files and you'll be rockin'.
By default, mock-css-modules will handle require()
d .css files. If your
project has some other extensions (such as .sass, .scss, etc), you'll need to
register handlers for those, too:
var mockCssModules = require("mock-css-modules");
mockCssModules.register(['.sass', '.scss', ...]);
Unfortunately, this means that if you are taking advantage of webpack's
resolvers to require()
files without extensions, it won't work. You should
use extensions for your CSS files.
If you are using mocha to run your tests, you can use mock-css-modules from the command line:
mocha --require mock-css-modules ...
If you need to handle additional extensions, copy the two lines above into a
file called test-setup.js
, for example, and require the file instead of
mock-css-modules directly:
mocha --require test-setup.js ...
FAQs
Mock CSS Modules for testing.
We found that mock-css-modules demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.