Karma测试运行器没有在组件的子目录中获取Enzyme测试文件

时间:2016-10-27 14:49:53

标签: reactjs debugging karma-runner chai enzyme

我使用Chai的Expect库测试我的React项目(测试实用程序)并使用Karma(测试运行器)运行测试。

我的工作项目目录结构如下所示: app - >组件 - >按钮 - > __test - > test.jsx

Karma在上面找到测试并运行成功没有问题。

有问题的目录结构如下所示: app - >组件 - >清单 - > ListHeader - > __test - > test.jsx

如果Karma位于组件的子目录中,则它不会接受测试。

我已设置autoWatch=true,在karma.config中添加了路径,并在互联网上查找线索/提示/解决方案,但没有运气。如果它有帮助,我已添加了karma.config文件。

感谢您抽出宝贵时间来研究这个问题!

const webpack = require('webpack')
const argv = require('yargs').argv
const path = require('path')

const aliases = require('./webpack/alias')
const config = require('./webpack/settings')
const loaders = require('./webpack/loaders')
const preloaders = require('./webpack/preloaders')

const karmaConfig = (config) => {
  config.set({
    // only use PhantomJS for our 'test' browser
    browsers: ['PhantomJS'],

    // just run once by default unless --watch flag is passed
    singleRun: !argv.watch,

    // Enable or disable colors in the output (reporters and logs)
    colors: true,

    // which karma frameworks do we want integrated
    frameworks: ['mocha', 'chai', 'sinon'],

    // displays tests in a nice readable format
    reporters: ['spec'],

    // include some polyfills for babel and phantomjs
    files: [
      './node_modules/babel-polyfill/dist/polyfill.js',
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './app/**/**/__test/test.jsx', // specify files to watch for tests
      './app/**/**/__test/test.js', // specify files to watch for tests
      './app/**/**/**/__test/test.jsx', // specify files to watch for tests
      './app/**/**/**/__test/test.js' // specify files to watch for tests
    ],
    preprocessors: {
      // these files we want to be precompiled with webpack
      // also run tests throug sourcemap for easier debugging
      ['./app/**/**/__test/*']: ['webpack', 'sourcemap']
    },
    // A lot of people will reuse the same webpack config that they use
    // in development for karma but remove any production plugins like UglifyJS etc.
    // I chose to just re-write the config so readers can see what it needs to have
    webpack: {
       devtool: 'inline-source-map',
       resolve: {
        // allow us to import components in tests like:
        // import Example from 'components/Example';
        root: path.resolve(__dirname, './app'),

        // allow us to avoid including extension name
        extensions: ['', '.js', '.jsx'],

        // required for enzyme to work properly
        alias: aliases
      },

      module: {
        // don't run babel-loader through the sinon module
        noParse: [
          /sinon(\\|\/)pkg(\\|\/)sinon\.js/
        ],
        // run babel loader for our tests
        // preLoaders: preloaders,
        loaders: loaders,
      },
      // required for enzyme to work properly
      externals: {
        'jsdom': 'window',
        'cheerio': 'window',
        'react-dom/server': 'window',
        'text-encoding': 'window',
        'react/addons': true,
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': 'window'
      },
    },
    webpackMiddleware: {
      noInfo: true,
      stats: {
        colors: true,
        chunks: false
      }
    },
    // tell karma all the plugins we're going to be using to prevent warnings
    plugins: [
      'karma-*'
    ],

    autoWatch: true
  })
}

module.exports = karmaConfig

1 个答案:

答案 0 :(得分:0)

这是globbing中的一个已知问题:

  

最后,主要原因似乎是我在karma.config中使用了一个glob模式,它在一个文件夹中包含一个双星号(* /),而且深度超过了第二级。

     

然后设法通过直接使用node-glob复制错误,以生成相同的错误。

     

最后,使用glob.sync路由,并自己构建URL数组解决了这个问题。希望这能让作者了解他能做些什么来解决问题。干杯

使用jsdom和glob作为替代方案。例如:

const glob = require('glob');
const jsdom = require('jsdom');
const chai = require('chai');

global.document = jsdom.jsdom();
global.window = document.defaultView;

global.navigator = window.navigator || {};
global.Node = window.Node;
global.addEventListener = window.addEventListener;
global.MouseEvent = window.MouseEvent;
global.KeyboardEvent = window.KeyboardEvent;
global.Event = window.Event;
global.btoa = window.btoa;
global.FormData = window.FormData;
global.FileReader = window.FileReader;
global.File = window.File;

window.beforeEach = global.beforeEach;
window.afterEach = global.afterEach;
window.before = global.before;
window.after = global.after;
window.mocha = true;

<强>参考