Unit tests #5

davidpfahler · 2015-07-25T17:04:56Z

How would you do unit tests with css-modules / css-loader?

I love the idea of css-modules but am struggling with testing as node cannot require css. I'm very thankful for any answer or idea.

geelen · 2015-08-15T02:47:46Z

You could mock out the require('style.css') call using something like jest: https://facebook.github.io/jest/

Or add css-modules-require-hook and actually load the CSS: https://github.com/css-modules/css-modules-require-hook

Will either of these methods work for you?

davidpfahler · 2015-08-15T12:52:39Z

The require hook option should work. I'll let you know how it went.

chenxsan · 2015-09-09T08:59:37Z

I'm using jest with webpack, made a preprocessor.js like below, just ignoring css files

var babelJest = require('babel-jest')
module.exports = {
  process: function(src, filename) {
    if (/\.css$/.test(filename)) {
      return ''
    } else {
      return babelJest.process(src, filename)
    }
  }
}

Of course I would get undefined className in the compiled test files, so it wouldn't be able to test the className.

sebastienbarre · 2015-09-28T22:56:58Z

@davidpfahler did this work for you?
I'm hitting the same road-block with mocha. I had some hopes css-modules-require-hook would work but I'm getting a lot of errors related to composes:

CssSyntaxError: postcss-modules-scope: /src/css/Vote.css:2:3: referenced class name "i__imported_large_0" in composes not found
.voteButton {
  composes: large from "./typography.css";

where src/css/Vote.css is:

.voteButton {
  composes: large from "./typography.css";
}

and src/css/typography.css is:

.large {
  font-size: 1.5rem;
}

Update: created css-modules/css-modules-require-hook#38

davidpfahler · 2015-09-29T12:40:09Z

@sebastienbarre Sorry for not responding for a while on this. In the project I was using css-modules (rebox-react) we moved from css files to style attributes, because we had issues with using this with react-transform.

sebastienbarre · 2015-09-29T13:41:45Z

Thanks @davidpfahler ; with respect to your issue with ReferenceError: window is not defined, maybe this could have helped:
In package.json:

    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js 'test/**/*.@(js|jsx)'",

and in ./test/test_helper.js:

import jsdom from 'jsdom';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key];
  }
});

mmrko · 2015-10-10T05:14:07Z

Here's one way to Mocha test React w/ CSS Modules: https://gist.github.com/mmrko/288d159a55adf1916f71

S-Venkat-S · 2016-07-03T18:50:04Z

@chenxsan Got any solutions for that ? I am also having the same problem...

S-Venkat-S · 2016-07-12T10:26:24Z

@chenxsan Seems got the solution for that... Look at this and give me some suggestions

Use the code inside the css if block...

//Imports
var postcss = require('postcss');
var plugin = require('postcss-hash-classname');

     var opts = { hashType: 'md5', digestType: 'base32' };
      opts.maxLength = 6;
      opts.type = '.json'
      opts.outputName = 'jsonFile_test';
      var processor = postcss([ plugin(opts) ]);
      processor.process(src).css;
      var jsonMap = fs.readFileSync("jsonFile_test.json","UTF-8");
      return "module.exports ="+jsonMap;

patrikholcak mentioned this issue Nov 20, 2015

How to make jest test the scss? #15

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unit tests #5

Unit tests #5

davidpfahler commented Jul 25, 2015

geelen commented Aug 15, 2015

davidpfahler commented Aug 15, 2015

chenxsan commented Sep 9, 2015

sebastienbarre commented Sep 28, 2015

davidpfahler commented Sep 29, 2015

sebastienbarre commented Sep 29, 2015

mmrko commented Oct 10, 2015 •

edited

S-Venkat-S commented Jul 3, 2016 •

edited

S-Venkat-S commented Jul 12, 2016 •

edited

Unit tests #5

Unit tests #5

Comments

davidpfahler commented Jul 25, 2015

geelen commented Aug 15, 2015

davidpfahler commented Aug 15, 2015

chenxsan commented Sep 9, 2015

sebastienbarre commented Sep 28, 2015

davidpfahler commented Sep 29, 2015

sebastienbarre commented Sep 29, 2015

mmrko commented Oct 10, 2015 • edited

S-Venkat-S commented Jul 3, 2016 • edited

S-Venkat-S commented Jul 12, 2016 • edited

mmrko commented Oct 10, 2015 •

edited

S-Venkat-S commented Jul 3, 2016 •

edited

S-Venkat-S commented Jul 12, 2016 •

edited