2

我一直在使用带有 mocha、酶和 css-modules-require-hook 的 css-modules 没有任何问题。

Foo.js

import React from 'react';
import styles from './Foo.css';

const Foo = () => <div className={ styles.foo }>Foo component</div>;

export default Foo;

Foo.css

.foo {
    color: rebeccapurple;
}

Foo.test.js

import Foo from './Foo';

describe('<Foo />', () => {
    it('should render proper markup', () => {
        const wrapper = shallow(<Foo />);

        expect(wrapper.find('.foo')).to.have.length(1);
    });
});

我开始将 Karma 与karma-webpack-with-fast-source-maps 一起使用，现在测试失败了，因为 Foo.js 中的样式是一个数组，它没有使用键来保留原始类名。

[[376, '.Foo__foo___3QT3e {
    color: rebeccapurple;
}
', '']]

我已经尝试test-bundler.js为 karma-webpack 导入 css-modules-require-hook ，但这会引发一堆错误。

WARNING in ./~/css-modules-require-hook/preset.js
Critical dependencies:
13:7-22 the request of a dependency is an expression
 @ ./~/css-modules-require-hook/preset.js 13:7-22

// many more warnings

ERROR in ./~/css-modules-require-hook/lib/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/qmmr/code/streetlife/composer/code/site/node_modules/css-modules-require-hook/lib
 @ ./~/css-modules-require-hook/lib/index.js 14:19-32

// more errors

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Unexpected token ')'

webpack.config.test.js

/* eslint-disable */
var path = require('path');

const CSS_MODULES_LOADER = [
    'modules',
    'importLoaders=1',
    'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&');

module.exports = {
    resolve: {
        extensions: [ '', '.js' ],
    },
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    plugins: [ 'transform-runtime', 'transform-class-properties', 'transform-export-extensions' ],
                    presets: [ 'es2015', 'react', 'stage-2' ],
                }
            },
            {
                test: /\.css$/,
                loader: `css?${ CSS_MODULES_LOADER }`,
                include: path.join(__dirname, '/css/modules'),
            },
            { test: /\.json$/, loader: 'json' },
        ],
    },
    externals: {
        'cheerio': 'window',
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true
    },
};

业力.conf.js

// Karma configuration
var webpackConfig = require('./webpack.config.test');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: [ 'mocha' ],
    plugins: [
      'karma-mocha',
      'karma-phantomjs-launcher',
      'karma-webpack-with-fast-source-maps'
    ],
    files: [
      {
        pattern: './testBundler.js',
        watched: false,
        served: true,
        included: true,
      },
    ],
    exclude: [],
    preprocessors: {
      [ './test-bundler.js' ]: [ 'webpack' ]
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true,
      stats: 'errors-only',
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: [ 'PhantomJS' ],
    singleRun: true,
    concurrency: Infinity,
  })
}

测试捆绑器.js

// ---------------------------------------
// Test Environment Setup
// ---------------------------------------

import React from 'react';
import chai from 'chai';
import sinon from 'sinon';
import { shallow, mount } from 'enzyme';
// require('css-modules-require-hook/preset'); // Fix css-modules not rendering in tests

global.React = React;
global.expect = chai.expect;
global.sinon = sinon;
global.shallow = shallow;
global.mount = mount;

// ---------------------------------------
// Require Tests
// ---------------------------------------
// for use with karma-webpack-with-fast-source-maps
const __karmaWebpackManifest__ = new Array(); // eslint-disable-line
const inManifest = (path) => ~__karmaWebpackManifest__.indexOf(path);

const testsContext = require.context('../react', true, /\.test\.js$/);

// only run tests that have changed after the first pass.
const testsToRun = testsContext.keys().filter(inManifest);

(testsToRun.length ? testsToRun : testsContext.keys()).forEach(testsContext);

如何在我的设置（karma + webpack）中使用 css-modules-require-hook？

编辑：我创建了一个存储库https://github.com/qmmr/yab来显示问题。运行npm run test:mocha时测试通过。运行npm run test时失败（这是 karma-webpack 集成）。

4

0 回答 0