React 测试未解析动态需求路径

Question

为了避免对我在测试中加载的每个模块的相对路径进行硬编码，我想设置一个基础 url 并连接 require 语句的字符串（参见下面的 UserStore-test.js）。当 require 语句被硬编码时，一切正常，但是当我连接字符串时，它给了我一个 'Uncaught Error: Cannot find module "."'

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

有些人真的不喜欢像这样将测试文件与源文件混合，我也这样做了，但我已经越来越喜欢这种方法，因为它很明显地测试了哪些模块。

React 测试未解析动态需求路径

React test not resolving dynamic require paths

reactjs

karma-jasmine

commonjs

webpack