Jest运行报错找不到@aws-amplify/ui-react/styles.css模块

我们在React项目中使用AWS Amplify实现认证功能，加载其官方样式后样式会全局生效。为保证Storybook中组件样式展示符合预期，我们在.storybook/preview.js中添加了导入语句import '@aws-amplify/ui-react/styles.css';，该配置在Storybook环境下运行完全正常。

但执行Jest测试命令时，程序抛出如下错误：

Cannot find module '@aws-amplify/ui-react/styles.css' from '.storybook/preview.js'

我曾通过添加环境判断逻辑的方式临时规避该问题，代码如下：

if (process.env.NODE_ENV !== 'test') {
  import('@aws-amplify/ui-react/styles.css');
}

但我希望明确该问题的产生根因，实现彻底修复而非临时规避。

当前环境信息 #

当前项目相关依赖版本为：

"@aws-amplify/ui-react": "2.5.0",
"aws-amplify": "^4.3.14"

我曾尝试将@aws-amplify/ui-react升级到最新版本，但升级后正式业务应用运行时也会抛出错误（主要为Typescript类型相关错误），因此回退到了原版本。

相关配置文件内容 #

package.json #

{
  "name": "super-draft-core-admin-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "2.5.0",
    "@craco/craco": "^6.4.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@fontsource/roboto": "^4.5.5",
    "@mui/material": "^5.6.0",
    "@mui/x-data-grid": "^5.8.0",
    "@mui/x-data-grid-pro": "^5.12.0",
    "@reduxjs/toolkit": "^1.8.2",
    "@superdraft/super-draft-common": "^1.2.7",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.180",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "awesome-debounce-promise": "^2.1.0",
    "aws-amplify": "^4.3.14",
    "axios": "^0.26.1",
    "bootstrap": "^5.1.3",
    "formik": "^2.2.9",
    "jwt-decode": "^3.1.2",
    "lodash.debounce": "^4.0.8",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.2",
    "react-debounce-input": "^3.2.5",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-json-view": "^1.21.3",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "react-toggle-slider": "^0.4.0",
    "styled-components": "^5.3.5",
    "use-constant": "^1.1.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.ts\"",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "test-storybook": "test-storybook"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@mui/icons-material": "^5.6.0",
    "@storybook/addon-a11y": "^6.5.6",
    "@storybook/addon-actions": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-interactions": "^6.5.6",
    "@storybook/addon-links": "^6.5.6",
    "@storybook/builder-webpack5": "^6.5.6",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.5.6",
    "@storybook/node-logger": "^6.5.6",
    "@storybook/preset-create-react-app": "^4.1.1",
    "@storybook/react": "^6.5.6",
    "@storybook/test-runner": "^0.1.1",
    "@storybook/testing-library": "^0.0.11",
    "@storybook/testing-react": "^1.3.0",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/lodash.debounce": "^4.0.6",
    "@types/styled-components": "^5.1.25",
    "@typescript-eslint/eslint-plugin": "^5.26.0",
    "@typescript-eslint/parser": "^5.26.0",
    "babel-plugin-named-exports-order": "^0.0.2",
    "babel-plugin-styled-components": "^2.0.7",
    "chromatic": "^6.6.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "husky": "^8.0.0",
    "jira-prepare-commit-msg": "^1.6.2",
    "miragejs": "^0.1.45",
    "prettier": "^2.6.2",
    "prop-types": "^15.8.1",
    "storybook-addon-react-dev-tools": "^1.1.0",
    "storybook-addon-react-router-v6": "^0.1.8",
    "storybook-mirage": "^0.0.7",
    "ts-node": "^10.5.0",
    "typescript": "^4.5.5",
    "webpack": "^5.72.1"
  },
  "jira-prepare-commit-msg": {
    "jiraTicketPattern": "([A-Z0-9]+-\\d+)"
  }
}

setupTests.ts #

该文件为项目唯一的Jest相关配置

// jest-dom 提供用于DOM节点断言的自定义jest匹配器
// 支持如下写法：
// expect(element).toHaveTextContent(/react/i)
import '@testing-library/jest-dom';
import { setGlobalConfig } from '@storybook/testing-react';
import * as globalStorybookConfig from '../.storybook/preview';

setGlobalConfig(globalStorybookConfig);

问题补充 #

将preview文件重命名为preview.tsx后，条件导入语句抛出如下TS错误：

TS2307: Cannot find module '@aws-amplify/ui-react/styles.css' or its corresponding type declarations.

我清楚该类类型错误的常规解决方式，但执行如下命令安装对应类型包时失败：

$ npm i @types/@aws-amplify                                                                                                         5s
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "@types/": name can only contain URL-friendly characters

内容的提问来源于stack exchange，提问作者Jonathan Tuzman