Question

我使用打字稿用lit-html编写了一个简单的演示：



.fa-arrows-alt-h {
  font-size: 30px;
  color: #bbb;
}

.input-fields {
  display: flex;
  background: #F7F9F6;
}

.new {
  width: 50%;
  float: right;
  border-right: 1px dashed #e9e9e9;
}



.form-input {
    padding-left: 3.575rem;
    height: calc(2.25rem + 2px);
    font-size: 1.5rem;
}


.first-container {
  display: inline-block;
  float: right;
  padding-right: 30px;
}

.second-container {
  display: inline-block;
  padding-left: 30px;
}

.divide {
  position: absolute;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: 20%;
}

并使用笑话编写一些简单的测试：

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

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

我的“ jest.config.js”是：

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

但是当我使用module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', }运行测试时，出现了这样的错误：

jest

原因应该是“ node_modules” 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.中的文件使用es模块，并且开玩笑不能很好地处理它。

我尝试了各种配置，但仍然无法解决，需要您的帮助，谢谢。

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

Answer 1

默认情况下，Jest不转换/node_modules/（docs）。为了使其正常工作，您可以像这样更改配置

jest.config.js

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

使用lit-html使用Typescript编写测试时，出现“ SyntaxError：无法在模块外部使用导入语句”

1 个答案: