javascript - 如何解决使用 Webpack 构建的 `require` 别名，用于 React 单元测试？

Question

关于 React 单元测试的问题。

我有一个 ReactJs 项目，这些是当前的设置:

• 基于create-react-app
• 使用弹出的Webpack构建
• 许多 Webpack 插件，如 sass-extract-loader
• 基于 webpack.config.dev.js 中内置的一些别名

现在，我正在安装一个 Jest 环境来为简单的 javascript 文件和 React 组件编写测试。

简单的 javascript 单元测试工作正常但是对于 React 组件的单元测试，测试配置无法正常工作。

不起作用的是一些 require 在 React 组件中使用别名(在 Webpack 中定义)的解析。

const motionConfig = require(`scssConfig/shared/motions.scss`)

scssConfig是在webpack.config.dev.js中配置的别名，但是在Jest环境中，执行jest --config jest.config时。在 json 中，由于未读取/找到所需的文件而弹出错误，当我尝试访问其内容时，这是从 const durationConfig = motionConfig.duration 行中显示的错误>

TypeError: 无法读取未定义的属性“duration”

所以基本上它是 React 环境设置失败，因为 React 组件单元测试尚未运行。

这是我的jest.config.json

{
  "bail": true,
  "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
  "testMatch": [
    "<rootDir>/src/app/**/?(*.)+(spec|test).(js|ts)?(x)"
  ],
  "testPathIgnorePatterns": [
    "<rootDir>/build/",
    "<rootDir>/generated/",
    "<rootDir>/node_modules/",
    "<rootDir>/public/"
  ],
  "snapshotSerializers": ["enzyme-to-json/serializer"],
  "collectCoverageFrom": [
    "src/**/*.{js,jsx,ts,tsx}"
  ],
  "testEnvironment": "node",
  "testURL": "http://localhost",
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.(css|scss)$": "<rootDir>/config/jest/cssTransform.js",
    "^(?!.*\\.(js|jsx|ts|tsx|json)$)": "<rootDir>/config/jest/fileTransform.js"
  },
  "transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
    "^.+\\.module\\.(css|scss)$"
  ],
  "moduleDirectories": [
    "node_modules",
    "<rootDir>/../library"
  ],
  "moduleNameMapper": {
    "\\.(css|scss)$": "identity-obj-proxy",
    "@company/library/(.*)": "<rootDir>/../library/$1"
  },
  "resolver": null,
  "moduleFileExtensions": [
    "js",
    "jsx",
    "ts",
    "tsx",
    "scss",
    "css"
  ]
}

这是jest.setup.js

import Adapter from 'enzyme-adapter-react-16'
import { shallow, mount, configure } from 'enzyme'
import { format } from 'util'
import React from 'react'
import dotenv from 'dotenv'
import registerRequireContextHook from 'babel-plugin-require-context-hook/register'

dotenv.config({ path: __dirname + '/../.env' })

registerRequireContextHook()
configure({ adapter: new Adapter() })

let global
global.React = React
global.shallow = shallow
global.mount = mount

class ConsoleError extends Error {}

if (global.console) {
  const throws = jest.fn((message, ...rest) => {
    if (!(message instanceof ConsoleError)) {
      const err = new ConsoleError(format(message, ...rest))
      Error.captureStackTrace(err, throws)
      throw err
    }
  })

  global.console = {
    ...global.console,
    error: throws,
    warn: throws,
    exception: throws
  }
}

这是 .babelrc.js

const commonPlugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ['./src/app/'],
      alias: {
        'scssConfig': '../path/to/scssConfig',
      }
    }
  ]
]

module.exports = {
  plugins: [...commonPlugins]
}

我认为 json 配置已正确完成，但缺少某些内容....什么？有什么技巧可以让它正常工作吗？非常感谢

Answer 1

就这样修好了

require 被 import 取代了

import motionScss from 'scssConfig/shared/gl-config-motion.scss'

在 jest.config.json 我做了这个更新

"\\.(scss)$": "<rootDir>/src/app/mocks/tests/scss.js",
"\\.(css)$": "identity-obj-proxy",

这是 src/app/mocks/tests/scss.js

module.exports = { global: { '$motion': { duration: {}, ease: {} }}};