未捕获的错误：目标容器不是 DOM 元素 React - Karma

问题描述

我正在尝试将 Karma runner 应用到我们的 React 项目。我正在使用 karma-webpack、babel-loader 来转译代码。进行一些配置后，我执行命令“karma start”并收到此错误。

错误日志：

 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:24828)
    at Module../src/index.js (index.js:12)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at absoluteindex.706055711.js:1

我已经提到了有关此错误的一些主题，然后我将 <script> 标记放在 </body> 之前，但仍然出现错误。

这里是 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <Meta name="viewport" content="width=device-width,initial-scale=1" />
    <Meta name="theme-color" content="#000000" />
    <Meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides Metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico","%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>ISFC</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <!--ENV CONfigURATION FILE-->
    <script src="%PUBLIC_URL%/env-config.js"></script>
  </body>
</html>

这里是/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { browserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import App from './App';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <Router basename="/ISF">
      <App />,</Router>
  </Provider>,document.getElementById('root')
);

这里是 src/karma.conf.js

// Karma configuration
// Generated on Mon May 17 2021 11:58:14 GMT+0700 (Indochina Time)
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
require('dotenv').config();
const webpack = require('webpack');

module.exports = (config) => {
  config.set({
    // base path that will be used to resolve all patterns (eg. files,exclude)
    basePath: '',// frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha','webpack','aChecker'],// list of files / patterns to load in the browser
    files: [{ pattern: './src/**/*.js',watched: false }],// list of files / patterns to exclude
    exclude: [],// preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './src/**/*.js': ['webpack'],},webpack: {
      devtool: 'inline-source-map',plugins: [
        new MiniCssExtractPlugin(),new webpack.DefinePlugin({
          // define some environment variable
        }),],module: {
        rules: [
          {
            test: /\.js$/,loader: 'babel-loader',exclude: path.resolve(__dirname,'node_modules'),query: {
              presets: ['@babel/preset-env','@babel/preset-react'],plugins: ['@babel/plugin-transform-runtime'],{
            test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'],webpackServer: {
      noInfo: true,// test results reporter to use
    // possible values: 'dots','progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress',// web server port
    port: 9876,// enable / disable colors in the output (reporters and logs)
    colors: true,// level of logging
    // possible values: config.LOG_disABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,// enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,// start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],// Continuous Integration mode
    // if true,Karma captures browsers,runs the tests and exits
    singleRun: false,// Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,});
};

对这个问题有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-loader javascript karma-webpack reactjs reactjs reactjs reactjs

未捕获的错误：目标容器不是 DOM 元素 React - Karma - Karma-webpack

问题描述

解决方法