Jak rozwiązać „Nie można użyć instrukcji importu poza modułem” w żartach

Mam aplikację React (nie używającą aplikacji Create React) zbudowaną przy użyciu TypeScript, Jest, Webpack i Babel. Podczas próby uruchomienia „przędzy jest” pojawia się następujący błąd:

Próbowałem usunąć wszystkie pakiety i ponownie je dodać. To nie rozwiązuje tego. Przejrzałem podobne pytania i dokumentację i nadal coś nie rozumiem. Poszedłem tak daleko, że podążałem za innym przewodnikiem konfigurowania tego środowiska od zera i nadal otrzymałem ten problem z moim kodem.

Zależności obejmują ...

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

Linie importu komponentu ...

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

Plik testowy ....

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

Oczekiwałem, że będę mógł używać nazwanych importów w moich komponentach bez wysadzenia testów. Wygląda na to, że rozwiązuje problem, jeśli używam domyślnego importu za pośrednictwem mojego rozwiązania, ale wolałbym nie iść tą drogą.

Rozwiązanie: mój nazwany import pochodził z plików index.js i uważam, że ts-jest potrzebny jako pliki index.ts (używam Typescript). Jeśli ktoś napotka ten błąd, nie zaszkodzi sprawdzić, czy wykasowałeś swoje rozszerzenia plików.

Niestety zmarnowałem na to dużo czasu, ale wiele się nauczyłem o konfiguracjach webpacka i Babel.

W przypadku przyszłych referencji

Rozwiązałem problem, używając poniższej konfiguracji, po przeczytaniu odpowiedzi Logana Shoemakera.

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

spróbuj tego, jeśli używasz Babel 6 1) Dodanie @ babel / plugin-transform-modules-commonjs w sekcji wtyczek babel.config.js

lub

2) W moim przypadku problem z importem wynikał z upuszczenia pliku reagowania przez dodanie go do transfromIgnorePatterns „transformIgnorePatterns”: [„/ node_modules / (?! reag-file-drop)”],

Napotkałem ten sam problem z Typescript, Jest i VueJS / VueCli 3. Normalna kompilacja nie ma problemu. zdarza się tylko dla Jest. Szukałem godzinami. Ale żadna odpowiedź nie działa. W moim przypadku mam zależność od własnego pakietu maszynopisu, który określiłem „target”: „es6” w pliku tsconfig.json . To jest podstawowa przyczyna. Tak więc rozwiązaniem jest po prostu zmiana zależności z powrotem na es5 tsconfig.json:

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

Użyj Babel do transponowania tych modułów JS, a będziesz mógł pisać swoje testy za pomocą es6.

Zainstaluj Babel / preset-env

npm i -D @babel/preset-env

Utwórz plik konfiguracyjny babel ze wstępnym ustawieniem

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