“语法错误:不能在模块外使用导入语句"；使用 lit-html 使用 typescript 编写测试时

问题描述

我使用 typescript 用 lit-html 编写了一个简单的演示:

I use typescript to write a simple demo with lit-html:

import {html, TemplateResult} from 'lit-html';

export default function sayHello(name: string): TemplateResult {
  return html`<h1>Hello ${name}</h1>`;
}

并使用 jest 编写一些简单的测试:

and use jest to write some simple test:

import sayHello from "./sayHello";
import {render} from "lit-html";

beforeEach(() => {
  render('', document.body);
})

describe('sayHello', () => {
  it('says hello', () => {
    render(sayHello('world'), document.body);
    const component = document.querySelector('h1');
    expect(component).toBeDefined();
  })
})

我的jest.config.js"是:

My "jest.config.js" is:

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
}

但是当我用 jest 运行测试时，我得到了这样的错误:

But when I run the tests with jest, I got such error:

FAIL  src/sayHello.test.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /workspace/typescript-webpack-lit-html-jest-test-demo/node_modules/lit-html/lit-html.js:31
    import { defaultTemplateProcessor } from './lib/default-template-processor.js';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import {html, TemplateResult} from 'lit-html';
        | ^
      2 |
      3 | export default function sayHello(name: string): TemplateResult {
      4 |   return html`<h1>Hello ${name}</h1>`;

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
      at Object.<anonymous> (src/sayHello.ts:1:1)
      at Object.<anonymous> (src/sayHello.test.ts:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.339 s
Ran all test suites.
error Command failed with exit code 1.

原因应该是"node_modules"中的文件node_modules/lit-html/lit-html.js使用了es模块，jest处理不好.

The reason should be the file in "node_modules" node_modules/lit-html/lit-html.js uses es module, and jest can't handle it well.

各种配置都试过了，还是不行，求各位帮忙，谢谢.

I tried all kinds of configurations, but still can't fix it, need your help, thanks.

针对这个问题的一个小而完整的演示项目:https://github.com/freewind-demos/typescript-webpack-lit-html-jest-test-demo

A small and complete demo project for this issue: https://github.com/freewind-demos/typescript-webpack-lit-html-jest-test-demo

推荐答案

默认情况下，Jest 不会转换 /node_modules/ (docs).为了使其工作，您可以像这样更改配置

By default Jest doesn't transforms the /node_modules/ (docs). In order to make it work you can change your configuration like this

还有@lit 命名空间的包也需要转换:

There are @lit namespaced packages that also need to be transformed:

• @lit/reactive-element

所以在正则表达式中添加可选的 @ 就可以了

so adding optional @ in the regex does the job

module.exports = {
  // ...
  transformIgnorePatterns: ["node_modules/(?!@?lit)"],
}

工作 GitHub 设置

config:删除对 tsConfig 选项的支持(#2127)(3cc9b80)

小写 tsconfig 应该用来代替 tsConfig

lowercase tsconfig should be used instead of tsConfig

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    // transform files with ts-jest
    "^.+\.(js|ts)$": "ts-jest",
  },
  transformIgnorePatterns: [
    // allow lit-html transformation
    "node_modules/(?!lit-html)",
  ],
  globals: {
    "ts-jest": {
      tsconfig: {
        // allow js in typescript
        allowJs: true,
      },
    },
  },
};

工作GitHub 设置(使用ts-jest":27.0.3")

working GitHub setup (with "ts-jest": "27.0.3")

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  transform: {
    // transform files with ts-jest
    "^.+\.(js|ts)$": "ts-jest",
  },
  transformIgnorePatterns: [
    // allow lit-html transformation
    "node_modules/(?!lit-html)",
  ],
  globals: {
    "ts-jest": {
      tsConfig: {
        // allow js in typescript
        allowJs: true,
      },
    },
  },
};

工作 GitHub 设置(修复分支)

这篇关于“语法错误:不能在模块外使用导入语句"；使用 lit-html 使用 typescript 编写测试时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！