配置 karma.js 以使用 react 和 ES6

Configure karma.js to work with react and ES6

本文关键字：react ES6 karma js 配置      更新时间：2023-09-26

我尝试用 ES6 开发一个反应模块，但找不到任何生成器，所以我不得不从一个基本的生成器开始制作它。我能够配置几乎所有东西，但我有很多问题试图配置 karma，测试我的模块。

这是我的业力.js 

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0
module.exports = function(config) {
  'use strict';
  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // base path, that will be used to resolve files and exclude
    basePath: '../',
    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['commonjs', 'mocha', 'chai'],
    // list of files / patterns to load in the browser
    files: [
      'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
      'node_modules/react/react.js',
      'lib/**/*.js',
      'test/**/*.js'
    ],
    preprocessors: {
      'lib/**/*.cjsx': ['cjsx'],
      'test/**/*.cjsx': ['cjsx'],
      'lib/**/*.js': ['babel', 'commonjs'],
      'test/**/*.js': ['babel', 'commonjs']
    },
    babelPreprocessor: {
      options: {
        sourceMap: 'inline'
      },
      filename: function (file) {
        return file.originalPath.replace(/'.js$/, '.es5.js');
      },
      sourceFileName: function (file) {
        return file.originalPath;
      }
    },
    // list of files / patterns to exclude
    exclude: [
    ],
    // web server port
    port: 8080,
    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'Chrome', 'PhantomJS'
    ],
    // Which plugins to enable
    plugins: [
      'karma-commonjs',
      'karma-cjsx-preprocessor',
      'karma-babel-preprocessor',
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai'
    ],
    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,
    colors: true,
    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,
    // Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

在这一点上，我有以下错误

Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
  Uncaught ReferenceError: module is not defined
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1

如果我从文件部分中删除 React ref，我会收到这个其他错误

PhantomJS 1.9.8 (Mac OS X) ERROR
  Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
  at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85

如果我删除commonJS，我会得到

PhantomJS 1.9.8 (Mac OS X) ERROR
  ReferenceError: Can't find variable: exports
  at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5

或者至少任何人都可以向我推荐一个带有业力的 yo 生成器，ES6，jsx，来构建模块，而不是 Web 应用程序？

感谢您的帮助

我相信

你只需要将反应文件的路径添加到预处理器文件列表中。这是因为 react 文件也像应用文件一样使用 commonjs 格式，当该文件在 chrome 中加载时，与 node 不同，浏览器不知道"模块"对象来自哪里。更新了以下代码的摘录。

        // list of files / patterns to load in the browser
        files: [
          'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
          'node_modules/react/react.js',
          'lib/**/*.js',
          'test/**/*.js'
        ],
        preprocessors: {
          // you can probably leave off babel here.
          'node_modules/react/react.js': ['babel', 'commonjs'],
          'lib/**/*.cjsx': ['cjsx'],
          'test/**/*.cjsx': ['cjsx'],
          'lib/**/*.js': ['babel', 'commonjs'],
          'test/**/*.js': ['babel', 'commonjs']
        },
相关文章：