Javascript 如何为React单元测试解析用Webpack生成的'require'别名？

关于单元测试的问题

我有一个ReactJs项目，以下是当前设置：

• 基于CreateReact应用程序
• 使用弹出的

  网页包构建

• 许多网页包插件，如

  sass提取加载程序

• 基于webpack.config.dev.js中内置的一些别名

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

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

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

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

不起作用的是解析React组件中使用别名（在Webpack中定义）的一些

require

s

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"
  ]
}

这是.babelrc.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
  }
}

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

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

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

我认为json配置做得很好，但是缺少了一些东西。。。。什么？有什么建议可以让它正常工作吗？非常感谢

这样修复了它

进口商品取代了进口商品

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

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

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