jest에서“모듈 외부에서 import 문을 사용할 수 없습니다”를 해결하는 방법

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();
});

테스트가 중단되지 않고 구성 요소에서 명명 된 가져 오기를 사용할 수있을 것으로 기대했습니다. 솔루션을 통해 기본 가져 오기만 사용하는 경우 문제를 해결하는 것으로 보이지만 해당 경로로 이동하지 않는 것이 좋습니다.

솔루션 : 내 이름이있는 가져 오기가 index.js 파일에서 왔으며 ts-jest가 index.ts 파일로 필요하다고 생각합니다 (Typescript를 사용하고 있습니다). 다른 사람 이이 오류에 부딪 치더라도 파일 확장자를 제거했는지 확인하기 위해 상처를 입지 않았습니다.

불행히도 이것에 많은 시간을 낭비했지만 웹 팩 구성과 Babel에 대해 많이 배웠습니다.

나중에 참조 할 수 있도록

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",
  }
};

babel 6을 사용하는 경우이 작업을 시도하십시오 6 1) babel.config.js의 플러그인 섹션에 @ babel / plugin-transform-modules-commonjs 추가

또는

2) 필자의 경우 가져 오기 문제는 transfromIgnorePatterns "transformIgnorePatterns"에 추가하여 반응 파일 삭제로 인한 것입니다. [ "/ node_modules / (?! react-file-drop)"],

Typescript, Jest 및 VueJS / VueCli 3에서 동일한 문제가 발생했습니다. 일반 빌드에는 문제가 없습니다. Jest에서만 발생합니다. 나는 수색을하면서 몇 시간 동안 고투했다. 그러나 실제로는 대답이 없습니다. 내 경우 에는 tsconfig.json 에서 "target": "es6" 을 지정하는 자체 유형 스크립트 패키지에 대한 종속성이 있습니다. 이것이 근본 원인입니다. 따라서 솔루션은 단순히 종속 항목을 다시 es5 로 변경하는 것입니다. tsconfig.json으로 .

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}

Babel을 사용하여 JS 모듈을 변환하면 es6으로 테스트를 작성할 수 있습니다.

Babel / preset-env 설치

npm i -D @babel/preset-env

사전 설정으로 babel 구성 파일 작성

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