reactjs - React 测试无法解析动态需求路径

Question

为了避免对我在测试中加载的每个模块进行硬编码相对路径，我想设置一个基本 url 并连接 require 语句的字符串(请参阅下面的 UserStore-test.js)。当 require 语句被硬编码时，一切正常，但是当我连接字符串时，它给我一个“ Uncaught Error :找不到模块“。””

//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 的内容，规范化该路径并将该模块添加到依赖关系树中，并用模块 ID 替换传递给 require 的模块名称。因此他们无法知道分析步骤中变量的内容。

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

但就您而言，我假设您的所有测试文件都位于源文件之外的另一个文件夹中，这就是您需要在文件夹结构中上下移动的原因。一个常见的解决方案是将测试文件放在源文件旁边。所以你的文件结构会是这样的:

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

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