如何使用TypeScript和Jest的Svelte（附代码）在2020年夏天，Svelte增加了对TypeScript

在2020年夏天，Svelte增加了对TypeScript的支持。打开它就像运行一个脚本一样简单!但是默认的启动项目并没有设置Jest测试。

我把默认的带有TypeScript的Svelte启动项目加入了Jest，同时还加入了几个测试样本。最后的项目在这里。

这是由Svelte测试库文档、Svelte Society repo的测试配方部分和svelte-jester的README中的信息拼凑而成的。

DIY或使用我的启动器

如果你想把这些步骤应用到你现有的项目中，或者只是想了解它是如何工作的，请随时按照下面的步骤进行。

或者如果你正在开始一个新的项目，你只是想开始行动，你可以克隆我的启动项目，它已经有了所有这些设置：

npx degit 'dceddia/svelte-typescript-jest#main' your-svelte-project
cd your-svelte-project
npm install
npm test

(如果你使用的是Zsh，别忘了在 repo + 分支名称周围加上引号)

你应该看到有两个测试通过了，并且已经准备好了!

请继续阅读我为使其正常工作而做的修改。

1.克隆标准的Svelte启动器

启动一个新的Svelte项目的实际标准方法是使用degit 工具来克隆 repo，同时删除多余的Git文件夹：

$ npx degit sveltejs/template svelte-typescript-jest

2.设置Svelte + TypeScript

官方启动项目可以在两种模式下工作：纯JavaScript（默认）或TypeScript。

为了将其转换为TypeScript，我们可以运行提供的setupTypeScript.js ，修改一些文件并设置构建。

切换到项目目录并运行该脚本，然后安装所有的包：

cd svelte-typescript-jest
node scripts/setupTypeScript.js
npm install

3.添加Jest支持、测试库和svelte-jester

这里我们要安装一堆东西：

jest来运行测试
ts-jest，让你用TypeScript写你的测试
@testing-library/svelte用于测试你的Svelte组件的一些有用的函数
@testing-library/jest-dom用于方便的DOM匹配器函数，如toBeInTheDocument
svelte-jester为Jest编译Svelte组件，以便Jest可以使用它们。
@types/jest让TS不再抱怨Jest的globals，如expect
babel-jest-可选- 让你用JavaScript写测试
@babel/preset-env，与babel-jest ，也是可选的。

npm install --save-dev \
    jest ts-jest \
    @testing-library/svelte @testing-library/jest-dom \
    svelte-jester @types/jest \
    babel-jest @babel/preset-env

4.在package.json中添加`test` 脚本

有了这个补充，你就可以运行npm test 来运行测试，或者npm run test:watch 来运行它们并观察变化。

package.json

{
  "scripts": {
    ...
    "test": "jest",
    "test:watch": "npm test -- --watch"
  }
}

5.将Jest配置添加到package.json中

我们需要配置Jest，告诉它如何处理.svelte,.ts, 和.js 文件。如果你只想用TypeScript写测试，你可以跳过.js 配置。

这需要成为package.json 中的一个顶层键，与 "scripts "和 "dependencies "以及其他键处于同一级别。

package.json

{
  "scripts": { ... },
  ...
  "jest": {
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ]
  }
}

6.创建`svelte.config.js`

在项目的根部建立一个新的文件，命名为svelte.config.js ，然后粘贴这个代码。

svelte.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess(),
};

svelte-preprocess 包默认与我们克隆的Svelte启动项目一起出现，所以我们不需要安装它。

我注意到，在我用Babel增加对JS测试的支持之前，没有这个文件一切都很正常。所以，如果你用TS写测试，跳过Babel的东西，你可能不需要这个。

7.将jest添加到tsconfig.json中

打开你的tsconfig.json 文件，由于运行了setupTypeScript.js 脚本，该文件应该已经存在，并添加这个compilerOptions 部分。

tsconfig.json

{
  ...
  "compilerOptions": {
    "types": ["jest"]
  }
}

8.在下面创建测试`src/tests`

为了验证一切是否正常，创建一个src/__tests__/hello.test.ts 文件，并把这个粘贴进去。

Jest会在src/__tests__ 目录下寻找测试：

import { render } from "@testing-library/svelte";
import App from "../App.svelte";

test("should render", () => {
  const results = render(App, { props: { name: "world" } });

  expect(() => results.getByText("Hello world!")).not.toThrow();
});

在这里，我们使用Testing-library中的render 函数，用一些道具来渲染我们的Svelte组件。然后我们检查渲染的结果，以确保我们传入的道具确实在页面上出现。

9.试试吧

剩下的就是确保一切正常。运行测试，你应该看到它通过了：

npm test

如何使用TypeScript和Jest的Svelte（附代码）