Как решить "Не могу использовать оператор импорта вне модуля" в шутке - PullRequest
Новая
       39

Как решить "Не могу использовать оператор импорта вне модуля" в шутке

2 голосов
/ 29 октября 2019

У меня есть приложение React (не использующее Create React App), созданное с использованием TypeScript, Jest, Webpack и Babel. При попытке запустить "yarn jest" я получаю следующую ошибку:

jest error

Я попытался удалить все пакеты и повторно добавить их. Это не решает это. Я посмотрел на подобные вопросы и документацию и до сих пор что-то неправильно понимаю. Я зашел так далеко, что следовал другому руководству по настройке этой среды с нуля, и все же получил эту проблему с моим кодом.

Зависимости включают ... 

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

Я ожидал, что смогу использовать именованный импорт в моих компонентах без разрушения моих тестов. Похоже, это решает проблему, если я использую импорт по умолчанию только через свое решение, но я бы предпочел не идти по этому пути.

1 Ответ

0 голосов
/ 30 октября 2019

Решение: мой именованный импорт происходил из файлов index.js, и я считаю, что ts-jest нуждался в них как в файлах index.ts (я использую Typescript). Если кто-то еще столкнется с этой ошибкой, не помешает проверить, не причинили ли вы свои расширения файлам.

К сожалению, я потратил много времени на это, но я многое узнал о конфигурации веб-пакетов и Babel.

...