When getting into some basic React testing with CSS Modules I ran into one issue. How the hell do I test them?
You may see the issue that I faced requiring a
.css file, if you don’t let me show you.
1 2 3 4 5 6 7
So there isn’t really much to test here, but lets say we wanted to make sure that a
div had the disabled class when it was given a disabled prop.
We fire up our test, create it, babel compiles, but oh no,
MyCss is undefined, or an empty object. Well duh, we’re using Webpack to process our CSS.
For that matter we could use something to mock the import right? Yeah you could but lets introduce something even more awesome so we don’t have to create custom mocks.
Babel Plugin Webpack Loaders Awesomeness
Babel Plugin Webpack Loaders allows us to run our tests and process all requires through our typical webpack loaders.
So when we’re writing our tests to check out if
MyComponent will have the disabled class we can just
import the file into our test and know that it’ll actually provide the processed CSS Modules!
1 2 3 4 5 6 7
Yeah that’s not actual code, but you get the point. Our Babel Plugin Webpack Loaders processed all our imports for us and away we go.
What does the setup look like for that?
I created a new
runtime.webpack.config.js file. They even provide you with a basic one, I realized that after the fact. runtime.webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
.babelrc file and added in the plugin like so
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
You can see we only use this plugin when we set our node environment variable to
Then for our test running we’ll use
mocha so we’ll need to set that up like so
1 2 3
Or however you have your testing setup. Moral of the story is set the
test, do your
Babel stuff for testing, and let the magic happen!
Of course this focuses on
css-modules specifically but all your Webpack plugins will run so test at will!
Words of warning
Just create a new Webpack config, or a configuration that outputs your app to
libraryTarget correctly. I opted for a new Webpack config but mine is fairly simple at the moment.
Also if you ever get
ModuleBuildError: Module build failed: TypeError: Cannot read property 'toString' of undefined that means you have some bad CSS. I should have read a little bit more, was getting issues with
parser in PostCSS and had left off a closing
A CSS linter, and or a PostCSS linter probably would have caught this? I don’t know, just know that I spent too much time being very confused when it was just human error causing the problem.