无法在 Jest 测试中使用 webpack 别名 - 不变违规：目标容器不是 DOM 元素答案

【问题标题】：Unable to use webpack alias with Jest testing - Invariant Violation: Target container is not a DOM element无法在 Jest 测试中使用 webpack 别名 - 不变违规：目标容器不是 DOM 元素
【发布时间】：2018-04-07 04:54:25
【问题描述】：

我创建了一个新的仓库来复制这里发现的这个问题：https://github.com/davidRoussov/jest-webpack-alias

这是一个使用 create-react-app 引导的 React 应用程序，但它已被弹出。我运行npm run test 时遇到的错误是这样的：

FAIL  src\components\Parent.test.js
● Test suite failed to run

Invariant Violation: Target container is not a DOM element.

  at invariant (node_modules/fbjs/lib/invariant.js:42:15)
  at Object.<anonymous> (src/index.js:7:20)
  at Object.<anonymous> (src/components/Parent.js:2:14)
  at Object.<anonymous> (src/components/Parent.test.js:2:15)
  at process._tickCallback (internal/process/next_tick.js:103:7)

正在测试的组件，Parent.js：

import React, { Component } from 'react';
import Child from '@/components/Child';

class Parent extends Component {
  render() {
    return (
      <div>
        <Child/>
      </div>
    );
  }
}

export default Parent;

测试，Parent.test.js：

import React from 'react';
import Parent from './Parent';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
      <Parent/>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

对于我只添加的 webpack 配置：

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

还有：

alias: {

  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',
  '@': resolve('src')
},

Jest 配置：

  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.js?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleDirectories": ["node_modules"],
    "modulePaths": ["src"],
    "moduleNameMapper": {
      "^@(.*)$": "<rootDir>/src",
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },

如果将import Child from '@/components/Child'; 替换为import Child from './Child';，Jest 不会产生错误

【问题讨论】：

标签： reactjs webpack jestjs

【解决方案1】：

我希望现在还不算太晚，您忘记替换路径中捕获的正则表达式组，如下所示：

"moduleNameMapper": {
  "^@(.*)$": "<rootDir>/src/$1",
},

Link to the documentation

【讨论】：