反应测试不解决动态需求路径

Question

为了避免对我在测试中加载的每个模块的相对路径进行硬编码，我想设置一个基本 url 并连接 require 语句的字符串（参见下面的 UserStore-test.js）。当require语句被硬编码时，一切正常，但是当我连接字符串时，它给了我一个'未捕获的错误：找不到模块“。”'

//UserStore-test.js
var base = '../../../';
var UserConstants = require('../../..constants/user/UserConstants'); // WORKS
//var UserConstants = require(base + '/constants/user/UserConstants'); // DOESN'T WORK

describe('UserStore', function(){
   ...
});

我的测试配置文件如下：

//karma.conf.js
var webpack = require('webpack');
var RewireWebpackPlugin = require("rewire-webpack");

module.exports = function(config) {
  config.set({
    browsers: ['Chrome'],
    files: [
      'tests.webpack.js'
    ],
    frameworks: ['jasmine'],
    preprocessors: {
      'tests.webpack.js': ['webpack', 'sourcemap'],
    },
    reporters: ['dots'],
    singleRun: true,
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.js?$/, exclude:/node_modules/, loader: 'babel-loader' },
        ],
      },
      watch: true,
      plugins: [new RewireWebpackPlugin()]
    },
    webpackServer: {
      noInfo: true,
    },
  });
};

和

//tests.webpack.js
var context = require.context('./path/to/files', true, /-test\.js$/);
context.keys().forEach(context);

我认为我的一个配置文件中一定缺少一个设置（可能是预处理器？），但我已经在谷歌上搜索了一段时间，似乎找不到任何东西。

Answer 1

您不能在 Webpack 或 Browserify 中对 require 的调用中使用变量。这样做的原因是他们都首先分析您的代码以查看您需要哪些模块，但它实际上并没有像您编写的那样运行您的require 语句。他们查看您传递给require 的内容，规范化该路径并将该模块添加到依赖关系树中，并将传递给require 的模块名称替换为模块ID。因此，他们无法在该分析步骤中知道变量的内容。

有很多方法可以避免 require 调用以 ../../../ 开头，这主要是关于构建代码并最大限度地减少彼此相距很远的模块之间的依赖关系。

但在您的情况下，我假设您将所有测试文件放在源文件之外的另一个文件夹中，这就是为什么您需要在文件夹结构中上下移动的原因。一个常见的解决方案是将测试文件放在源文件旁边。所以你的文件结构是这样的：

src/
  todo/
    component.js
    component.test.js
  app.js
  app.test.js

有些人真的不喜欢这样混合测试文件和源文件，我也这样做了，但我已经成长为非常喜欢这种方法，因为测试哪些模块非常明显。