如何在玩笑中解决“无法在module外使用导入语句”

IT技术 reactjs jestjs babeljs babel-jest ts-jest
2021-03-27 03:19:12

我有一个使用 TypeScript、Jest、Webpack 和 Babel 构建的 React 应用程序(不使用 Create React App)。尝试运行“yarn jest”时,出现以下错误:

开玩笑的错误

我尝试删除所有软件包并重新添加它们。它没有解决这个问题。我看过类似的问题和文档,但仍然误解了一些东西。我什至按照另一个指南从头开始设置这个环境,但我的代码仍然收到这个问题。

依赖包括...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

组件的导入行...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

测试文件....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
    const tree = renderer
        .create(<App />)
        .toJSON();
    expect(tree).toMatchSnapshot();
});

我希望能够在我的组件中使用命名导入,而不会导致我的测试失败。如果我只通过我的解决方案使用默认导入,它似乎可以解决这个问题,但我不想走那条路。

6个回答

还使用 Babel、Typescript 和 Jest。有同样的失败,让我疯狂几个小时。最终babel.config.js为测试创建了一个新文件。有一个大的.babelrc,不管我对它做了什么,都不会被笑话所吸引。主应用程序仍然使用 ,.babelrc因为这会覆盖babel.config.js文件。

安装 jest、ts-jest 和 babel-jest:

npm i jest ts-jest babel-jest

babel.config.js (仅供开玩笑使用)

module.exports = {presets: ['@babel/preset-env']}

jest.config.js

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
  }
};

package.json

  "scripts": {
    "test": "jest"
有效,别忘了也安装@babel/preset-env😉
2021-05-25 03:19:12
对我来说,typescript文件的新转换带来了问题,通过添加 js 转换来使用 babel-jest 解决,即添加 "^.+\\.(js|jsx)$": "babel-jest" 以在玩笑中转换配置js文件
2021-05-26 03:19:12
非常感谢,这也给我带来了很多麻烦,您的解决方案花了几秒钟的时间才包含在内,就像其他人所说的那样 - 它就像魅力一样。
2021-05-26 03:19:12
谢谢!这就像一个魅力。必须将我的 .babelrc 转换为 babel.config.js 才能做到这一点,但一切都解决了!
2021-06-03 03:19:12

使用 Babel 转译那些 JS module,你就可以使用 es6 编写测试。

安装 Babel/preset-env

npm i -D @babel/preset-env

使用预设创建 babel 配置文件

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}
谢谢,这解决了我的问题
2021-05-28 03:19:12
简洁明了,谢谢!对于我的项目,tsdx这就是诀窍(连同@babel/preset-react)。
2021-06-13 03:19:12

我通过将.babelrc文件迁移babel.config.js! 震惊。

这是我的问题!忘记复制 babel 配置了!谢谢 :)
2021-06-10 03:19:12

供以后参考,

在阅读了 Logan Shoemaker 的回答后,我通过使用下面的 jest 配置解决了这个问题。

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
  }
};
我的 Jest 配置只缺少moduleDirectories: ["node_modules", "src"],我添加了其中的内容,一切都按预期开始工作。谢谢
2021-05-31 03:19:12

解决方案:我命名的导入来自 index.js 文件,我相信 ts-jest 需要它们作为 index.ts 文件(我使用的是 Typescript)。如果其他人遇到此错误,请检查您是否删除了文件扩展名。

不幸的是,我在这上面浪费了很多时间,但是我学到了很多关于 webpack 配置和 Babel 的知识。

我花了两个小时来解决这个错误。好吧,看完这个答案,我现在想哭T_T。我正在从 js 迁移到 typescript,但忘记将“.js”重命名为“.ts”
2021-06-13 03:19:12
你是如何解决index.js其他module中的问题的
2021-06-18 03:19:12