为什么 import 一个库后，就 syntax error, unexpected token 'export' 了？

nodejs, react, typescript

node v14.7.0
react 17.0
jest 26.6.3

这是一个测试，主要用来测试入口文件的。我不清楚为什么写这个测试，都是 legacy （几年前的，写的人也走了）的代码。
也不太好删除，否则，得去“解释”为什么把这个测试删除。（大家都懂的）

我的理解，这个测试主要就是，看看能否正常把 index module 给 load 进来，不出错就行。

describe("tests", () => {
  describe("bootstraping the app", () => {
    it("test react render method", () => {
      const app = document.createElement("div");
      app.setAttribute("id", "app");
      document.body.appendChild(app);

      const bootStrapper = () => {
        require("../index");
      };

      expect(bootStrapper).not.toThrowError();

      document.body.removeChild(app);
    });
  });
});

然后，index.tsx 文件，就是我们程序的入口文件，引用 react，然后 render app.

import * as React from "react";
... blabla

现在，有新的需要，我添加了一个 import

import * as React from "react";
import { Inspector } from "react-dev-inspector";

<inspector>
  <app />
</inspector>

用这个 wrap 原来的 app.

项目都能够正常编译，运行。所有的功能使用下来都正常。但就是上面这个测试跑不过。
提示出错的位置，就是那个 import 语句那里。

    expect(received).not.toThrowError()

    Error name:    "SyntaxError"
    Error message: "Unexpected token 'export'"

不是很清楚，是 module 导出有问题，还是 import 有问题。
google 了半天，没有找到类似问题或者合适的答案。

特来请教一下。谢谢

p.s. https://stackoverflow.com/questions/38296667/getting-unexpected-token-export

yazoox

2021-01-20 10:24:33 +08:00

@alan0liang
项目运行需要编译，所以会跑 webpack，但是 jest 好像没有，直接运行的
我们有个 jest.config.js 的配置文件，里面倒是有 babel 相关

module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
reporters: ["default", "jest-junit"],
globals: {
"ts-jest": {
babelConfig: {
plugins: ["dynamic-import-node", "babel-plugin-styled-components"]
},
tsconfig: "<rootDir>/tsconfig.jest.json"
}
}
}

@magicdawn
tsconfig.jest.json 只比项目运行的 jest 文件多下面这一项配置

{
"extends": "./tsconfig.json",
"compilerOptions": {
"esModuleInterop": true
}
}