测试SvelteKit应用程序的介绍

尼耳多
476 阅读6分钟

为了处理前端开发者特有的问题，如速度、可访问性和优化，Next.js、Nuxt.js和Scully被引入，分别用来补充React、Vue和Angular。SvelteKit是一个用于构建高性能Web应用的框架，是在其前身Sapper的基础上引入的，以补充Svelte。

在这篇文章中，我们将介绍如何测试用SvelteKit构建的应用程序，包括单元测试和端到端测试等领域。让我们开始吧!

TL;DR: 你可以在GitHub上查看这个测试项目的代码样本

从头开始创建一个SvelteKit应用程序

首先，我们将创建一个新的SvelteKit应用程序。在你的终端，运行以下命令。

# start up a Svelte app
npm init svelte@next my-app

# navigate to the app
cd my-app

# install dependencies
npm install

#start up the development server
npm run dev

上面的代码生成了一个光秃秃的Svelte应用，看起来像下面的图片。

New Svelte App

我们新创建的应用程序有三个组件，即主页index.svelte ，关于页面about.svelte ，以及在欢迎横幅上方看到的todos页面todo/index.svelte 。

为了增加应用程序的复杂性并创造更多的测试场景，让我们为我们的应用程序添加一个额外的组件，该组件将从礼品卡服务提供商Reloadly获取并显示礼品卡数据集合。导航到src/routes 文件夹，用下面的代码创建礼品卡组件。

// src/routes/giftcards.svelte

<svelte:head>
    <title>Giftcards</title>
</svelte:head>

<script>
    import { onMount } from 'svelte';
    const accessToken = 'Bearer ACCESS_TOKEN'
    let results = [];
    onMount(() => {
        getGiftCards();
    })
    let headers = {
        'Accept' : 'application/com.reloadly.giftcards-v1+json',
        'Authorization' : accessToken
    }
    const getGiftCards = async () => {
      const res = await fetch('https://giftcards.reloadly.com/countries/es/products', {
            method: 'GET',
            headers: headers
        });
        const json = await res.json();
        results = json
    };

</script>

在上面的代码片段中，首先，我们用<svelte:head> 元素指定礼品卡组件的头。接下来，我们向Reloadly发出HTTPGET 请求，以获取我们的应用程序所需的礼品卡列表。

当我们发出请求时，我们将需要Reloadly的访问令牌。为了获得访问令牌，请按照快速入门指南中的简短步骤创建一个Reloadly账户。

最后，为了总结我们的礼品卡组件，让我们用一个each 块来解析我们收到的数据。

// src/routes/giftcards.svelte

<main class= 'response'>
    {#each results as result}
    <div class="data">
        <img class="product_image" src="{result.logoUrls[0]}" alt="gift card images" width="200px"/>
        <p class="product_name">{result.productName}</p>
        <p class="currency_code">Currency: {result.recipientCurrencyCode}</p>
        <p class="redeem_instructions">Redeem Instructions: {result.redeemInstruction.concise}</p>
    </div>
    {/each}
</main>

现在我们的礼品卡组件已经准备好了，我们应该有一个类似于以下的用户界面。

youtu.be/qFNpOtHOWww

上面的视频显示了我们的用户界面，以显示不同的礼品卡，包括货币（目前设置为美元），以及包含兑换说明的链接。

为了简化我们的代码，我们省去了CSS样式，但如果你愿意，你可以访问并修改它。

用Jest和Svelte测试库对SvelteKit进行单元测试

对于我们的第一个测试用例，我们将涵盖单元测试，这将使我们能够单独测试每个组件。我们将使用Svelte测试库，一个用于测试Svelte组件的轻量级库，和Jest，一个JavaScript测试框架。让我们从安装这两个工具开始。

   npm install --save-dev @testing-library/svelte jest

要在Svelte中使用Jest，首先，我们需要安装以下依赖项。

   npm install --save-dev svelte-jester babel-jest @testing-library/jest-dom
  • svelte-jester: 一个可以编译Svelte组件的依赖项
  • babel-jest: Jest的babel.transform ，用于ES6模块。
  • jest-dom ：一个提供一组自定义Jest匹配器的依赖项，该匹配器扩展了Jest。

在安装了我们的依赖关系后，我们将在我们的package.json 文件中指定一些变化。首先，当我们通过npm运行测试时，我们将使用Jest。此外，任何不是本地JavaScript的代码，在我们的例子中，是Svelte和ES6，将被转换，允许Jest访问它。

{
  "scripts": {
    "test": "jest src",
    "test:watch": "npm run test -- --watch"
  },
  "jest": {
    "transform": {
       "^.+\\.js$": "babel-jest",
      "^.+\\.svelte$": "svelte-jester"
    },
    "moduleFileExtensions": ["js", "svelte"]
  }
}

接下来，在你项目的根目录下创建一个.babelrc 文件，并添加以下配置。

{
  "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}

With our configurations completed, let’s perform a unit test on one of our components. In the lib folder where we placed the Counter component, create a test file called counter.spec.js and add the following code:

// src/lib/counter.spec.js

import '@testing-library/jest-dom';
import { render } from "@testing-library/svelte";
import Counter from "./counter.svelte";
describe("counter component", () => {
  test("should confirm there are no images in the counter ", () => {
    const { container } = render(Counter);
    expect(container).not.toContainHTML("");
  });
});
```

```

上面的代码片段测试了`Counter` 组件中是否没有`` 元素。在下面的视频中，我们正在运行一个单元测试，以指定`Counter` 组件没有任何图像的`npm run test` 命令。

[https://youtu.be/pbXI9OzFNQQ](https://youtu.be/pbXI9OzFNQQ)

你可以继续对我们应用程序中的其他组件运行单元测试，以确保它们按照预期工作。

使用Cypress对SvelteKit进行端到端测试
--------------------------

现在我们已经完成了单元测试，让我们来介绍一下端到端测试，这将使我们对我们的应用程序在现实生活中的工作情况有一些了解。对于端到端测试，我们将使用Cypress，一个基于JavaScript的测试框架。首先，让我们在终端用以下命令安装Cypress。

```
  npm install cypress --save-dev

```

安装Cypress会在你的项目中创建一个额外的文件夹，其中包含以下一组演示测试套件。

![Cypress Folder Demo Test Suites](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b937086e97464557b584a38faf0d5ace~tplv-k3u1fbpfcp-zoom-1.image)

一旦安装完成，通过终端用以下命令启动Cypress。

```
  npx cypress open

```

上面的命令启动了Cypress的测试套件，它看起来像下面的图片。

![Cypress Demo Test Suite](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3212cf2e7aad47feb1308e74c3c232b4~tplv-k3u1fbpfcp-zoom-1.image)

在上面的图片中，我们可以看到，演示测试套件在安装时被创建。让我们删除现有的两个文件夹，创建我们自己的测试套件。导航到`cypress/integration` 文件夹，删除现有的两个文件夹，并创建一个新的文件夹，名为`giftcards` 。

在这个文件夹中，创建一个名为`giftcards.spec.js` 的测试文件。在这个文件中，我们将为礼品卡组件定义测试。

```
// cypress/integration.giftcards/giftcards.spec.js

const baseUrl = 'http://localhost:3000/giftcards';
describe('GiftCard Test', () => {
    it('Confirms gift card data', () => {
        cy.visit(baseUrl)
        cy.get('.data').children().should('have.length', 336)
        cy.get('.product_name').contains('Amazon Spain')
        cy.get('.currency_code').should(($currency_code) => {
            expect($currency_code).to.have.length(84)
            expect($currency_code).to.contain('EUR')
            expect($currency_code).to.contain('USD')
            expect($currency_code).to.not.contain('GBP')
        })
    })
  })


```

在上面的代码片段中，我们使用了Cypress的API中的一些命令来指定我们的端到端测试。基本上，我们的测试套件。

*   访问我们的礼品卡组件的URL
*   确认该组件中的元素总数为336个
*   确认在我们的礼品卡集合中存在一个名为`Amazon Spain` 的礼品卡
*   确认我们的平台上有84种不同的礼品卡可供销售
*   确认有欧元的货币面额
*   确认有美元的货币面值
*   确认没有英镑的货币面值

最后，让我们保存并重新启动测试套件。

[https://youtu.be/apOgg\_rgyHg](https://youtu.be/apOgg_rgyHg)

结论
--

集成测试是每个项目的重要和必要的部分，它可以确保你的应用程序在部署后能按预期运行。值得庆幸的是，正如我们在本教程中所展示的，测试你的SvelteKit应用程序是相当简单和直接的。我们涵盖了在SvelteKit中测试应用程序的一些基础知识，包括用Jest和Svelte测试库进行单元测试以及用Cypress进行端到端测试。

我希望你能喜欢这个教程!如果你推荐任何其他用于测试Svelte和SvelteKit应用程序的框架，请务必在下面留言。

[测试SvelteKit应用程序的介绍](https://blog.logrocket.com/intro-testing-sveltekit-applications/)》一文出现在[LogRocket博客](https://blog.logrocket.com)上。
avatar
文章
阅读
粉丝