Como resolver “Não é possível usar a instrução de importação fora de um módulo” em tom de brincadeira

Eu tenho um aplicativo React (não usando o Create React App) criado usando TypeScript, Jest, Webpack e Babel. Ao tentar executar o "yarn jest", recebo o seguinte erro:

Eu tentei remover todos os pacotes e adicioná-los novamente. Isso não resolve isso. Eu olhei para perguntas e documentação semelhantes e ainda estou entendendo algo errado. Fui até o ponto de seguir outro guia para configurar esse ambiente do zero e ainda recebi esse problema com o meu código.

Dependências incluem ...

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

As linhas de importação do componente ...

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

O arquivo de teste ....

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

Eu esperava poder usar importações nomeadas em meus componentes sem explodir meus testes. Parece corrigir o problema se eu só usar importações padrão por meio da minha solução, mas preferiria não seguir esse caminho.

Solução: minhas importações nomeadas eram provenientes de arquivos index.js. e acredito que o ts-jest precisava deles como arquivos index.ts (estou usando o Typecript). Se mais alguém encontrar esse erro, não se preocupe em verificar se você derped suas extensões de arquivo.

Infelizmente, perdi muito tempo com isso, mas aprendi muito sobre configurações de webpack e Babel.

Para referências futuras,

Resolvi o problema usando a configuração de brincadeira abaixo, depois de ler a resposta de Logan Shoemaker.

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

tente isso se você estiver usando o babel 6 1) Adicionando @ babel / plugin-transform-modules-commonjs na seção de plug-in do babel.config.js

ou

2) Para o meu caso, o problema de importação ocorreu devido à queda do arquivo de reação ao adicionar transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)"],

Eu encontrei o mesmo problema com Typescript, Jest e VueJS / VueCli 3. A compilação normal não tem nenhum problema. só acontece para Jest. Eu lutei por horas pesquisando. Mas nenhuma resposta realmente funciona. No meu caso, tenho uma dependência do meu próprio pacote de texto datilografado, que especifico "target": "es6" no tsconfig.json . Essa é a causa raiz. Portanto, a solução é simplesmente alterar os dependentes de volta para es5 tsconfig.json:

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

Use Babel para transpilar esses módulos JS e você poderá escrever seus testes com es6.

Instale o Babel / preset-env

npm i -D @babel/preset-env

Crie um arquivo de configuração babel com a predefinição

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