Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Unit tests #5

Open
davidpfahler opened this issue Jul 25, 2015 · 9 comments
Open

Unit tests #5

davidpfahler opened this issue Jul 25, 2015 · 9 comments

Comments

@davidpfahler
Copy link

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
Copy link
Member

geelen commented Aug 15, 2015

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
Copy link
Author

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

@chenxsan
Copy link

chenxsan commented Sep 9, 2015

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
Copy link

@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
Copy link
Author

@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
Copy link

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
Copy link

mmrko commented Oct 10, 2015 •
edited
Loading

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

@patrikholcak patrikholcak mentioned this issue Nov 20, 2015
Open
@S-Venkat-S
Copy link

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

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

@S-Venkat-S
Copy link

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

@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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@geelen @sebastienbarre @davidpfahler @chenxsan @mmrko @S-Venkat-S