Question

我正在使用react.js开发一个应用程序。我的申请正在成长。所以我对进口没什么问题。例如，我有一个名为foo的组件，我在许多地方使用它。

import foo from '../../components/foo';
import foo from '../components/foo';
import foo from '../../../components/foo';

你可以看到它的脏，不好。所以我搜索修复它，我找到了一个webpack的解决方案。此外，我在此article

中读取了标题（配置Webpack的模块解析以避免嵌套导入）

我将此代码添加到我的webpack.config.js文件

中

modules: [
     'node_modules',
     path.resolve(__dirname, 'src')
  ]

所以我的解决方案对象看起来像这样

export default {
resolve: {
  modules: [
     'node_modules',
     path.resolve(__dirname, 'src')
  ],
  extensions: ['*', '.js', '.jsx', '.json']
},
...

之后，我可以在任何地方使用import my foo组件。

import foo from 'components/foo';

到目前为止一切都还可以。但问题出现在测试文件中。

当我尝试测试foo组件时，它说

无法从'foo.js'找到模块'components / foo'

示例测试文件。

foo.spec.js

    import React from 'react';
    import foo from 'components/foo';

    describe('(Component) foo', () => {
       it('should render foo', () => {
         expect(true).toBe(true);
       });
    });

这是第一个问题。我无法像这样导入foo。

注意：我的测试文件不在src文件夹中的test文件夹中。

所以我改变了这样的路径然后它起了作用。

import foo from '../../../src/components/foo';

Tes传递一切看起来很好。但是我们在测试文件中仍然存在路径问题。让我们尝试在foo组件中导入另一个组件。

foo.js

import bar from 'components/admin/bar';

这是第二个问题。测试文件FAILED错误消息是

无法从'foo.js'找到模块'components / admin / bar'

我将测试文件移到了我的foo.js文件中。但没效果。

这是我的整个webpack.config.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
export default {
   resolve: {
      modules: [
         'node_modules',
         path.resolve(__dirname, 'src')
      ],
      extensions: ['*', '.js', '.jsx', '.json']
   },
   devtool: 'inline-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
   entry: [
      // must be first entry to properly set public path
      './src/webpack-public-path',
      'webpack-hot-middleware/client?reload=true',
      path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
   ],
   target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
   output: {
      path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
      publicPath: '/',
      filename: 'bundle.js'
   },
   plugins: [
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
         __DEV__: true,
         //'API_URL': API_URL.dev
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
         template: 'src/index.ejs',
         minify: {
            removeComments: true,
            collapseWhitespace: true
         },
         inject: true
      }),
      new webpack.LoaderOptionsPlugin({
         minimize: false,
         debug: true,
         noInfo: true, // set to false to see a list of every file being bundled.
         options: {
            sassLoader: {
               includePaths: [path.resolve(__dirname, 'src', 'scss')]
            },
            context: '/',
            postcss: () => [autoprefixer],
         }
      })
   ],
   module: {
      rules: [
         {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
         {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
         {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=10000&mimetype=application/font-woff'
         },
         {test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
         {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'},
         {test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
         {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
         {
            test: /(\.css|\.scss|\.sass)$/,
            loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
         }
      ]
   }
};

我该如何解决？谢谢你的帮助。

Answer 1

在测试执行期间不使用Webpack。由于您使用的是babel，babel-plugin-module-resolver https://github.com/tleunen/babel-plugin-module-resolver应解决此问题：

在您的.babelrc文件中

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"]
    }]
  ]
}

更简洁的方法是在alias文件中创建.babelrc，然后从该别名导入，例如：

{
    "plugins": [
        ["module-resolver", {
            "alias": {
                "@app": "./src"
            }
        }]
    ]
}

在你的文件中： import foo from '@app/components/foo'

这样你就没有命名冲突，你的路径很好而且很短。

Answer 2

我在package.json文件中更改了这个jest对象后问题解决了。

"jest": {
  "moduleDirectories": [
     "node_modules",
     "src"
  ]
  ...

由于webpack模块解析器，ReactJS测试文件发出'找不到模块'

2 个答案: