search

cheton / browserify-css

A Browserify transform for bundling, rebasing, inlining, and minifying CSS files.
http://cheton.github.io/browserify-css/
MIT License
144 stars 22 forks source link

working with jest #31

Closed ghost closed 7 years ago

ghost commented 8 years ago

Hi guys, I'm trying to use browserify-css together with React. My component looks like such:

var MyComponent = React.createClass({
    componentWillMount: function () {
        // inject css to <head>
        require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');
        require('../css/app.css');
    },

but when I try to use jest to test this component, it looks like jest doesn't know how to use browserify-css to transform the require('...css') part. Therefore I'm having this error:

 SyntaxError: /Users/.../node_modules/bootstrap/dist/css/bootstrap.min.css: Unexpected token {

any idea how to config jest so that it utilizes browserify-css properly?

thanks

cheton commented 8 years ago

A custom Jest preprocessor might be necessary to add browserify support. Look like it is similar to http://stackoverflow.com/questions/28870296/how-to-use-jest-with-webpack.

If you don't care about requiring CSS files in your unit test. Try the following method as a quick hack:

// package.json

"jest": {
  "scriptPreprocessor": "<rootDir>/jest-script-preprocessor"
}
// jest-script-preprocessor.js
var babelJest = require('babel-jest');

module.exports = {
  process: function(src, filename) {
    return babelJest.process(src, filename)
      .replace(/^require.*\.css.*;$/gm, '');
  }
};
cheton commented 8 years ago

By the way, you can load bootstrap.css as the followings instead of ../../../../../../.

Method 1. require/import bootstrap.css from .js/.jsx file:

require('bootstrap/dist/css/bootstrap.css');
// or
import 'bootstrap/dist/css/bootstrap.css';

Method 2. Import bootstrap.css from your app.css:

import url("node_modules/bootstrap/dist/css/bootstrap.css");
ghost commented 8 years ago

@cheton Thanks for the answer, use script-preprocessor is our current solution too. I'm just curious if there are any built-in jest plugins for browserify-css yet.

and thanks for the tips for requiring bootstrap ! :+1:

may I also ask which one is the best practice in terms of better performance(loading time) or maintainability?

thank you!

cheton commented 8 years ago

I've tried to search keywords like browserify jest but found nothing useful in npmjs and stackoverflow.

Since browserify-css works only if document.head is available in your test environment, I'd suggest strip out require of non JavaScript files (e.g. .css, .less etc) for a pure-play unit test that doesn't need to involving with CSS files.

Regarding the tips of requiring bootstrap, both methods produce the same result since all descedant CSS filles will be concatenated and minified by browserify-css, and stored into JS bundles. It won't produce additional HTTP requests.

If you want to get benefits from CDN, I'd recommend you put bootstrap CDN link to your HTML head instead of require('bootstrap/dist/css/bootstrap.css'), it will definitely reduce your JS bundle size and enables faster download time for single page application.