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

11

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:

jest 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ą.

Logan Shoemaker
źródło
Do twojej wiadomości, wpadłem na to podczas konfigurowania niestandardowego TestSequencer dla Jest i właśnie przełączyłem się na używanie requirezamiast import, tylko dla tego jednego pliku.
Joshua Pinter

Odpowiedzi:

3

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.

Logan Shoemaker
źródło
0

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",
  }
};
Onur Özkan
źródło
0

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)”],

readytohackk
źródło
0

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",
    ...
  },
  ...
}
Jianwu Chen
źródło
Co zmieniłeś
Nida Munir
1
Przepraszam za błąd w moim oryginalnym poście. Korzystałem z es6 w module zależnym. To jest podstawowa przyczyna problemu. Po zmianie z powrotem na es5 problem został rozwiązany
Jianwu Chen
-1

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']}
Natan Williams
źródło