Question

为了避免硬编码我在测试中加载的每个模块的相对路径，我想设置一个基本网址＆amp;连接require语句的字符串（请参阅下面的UserStore-test.js）。当require语句被硬编码时，一切正常，但是当我连接字符串时，它会给我一个未捕获的错误：找不到模块＆＃34;。＆＃34;＆＃39;

//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);

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

Answer 1

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

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

但在您的情况下，我假设您将所有测试文件放在另一个文件夹而不是源文件中，这就是您需要在文件夹结构中上下移动的原因。一个常见的解决方案是将测试文件放在源文件旁边。因此，您的文件结构将类似于：

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

有些人真的不喜欢将测试文件与这样的源文件混合在一起，我也做了，但我已经非常喜欢这种方法，因为很明显哪些模块是经过测试的。

反应测试无法解析动态需求路径

1 个答案: