使用Tape和Vue Test Utils编写快速的Vue单元测试-CSDN博客

by Edd Yerburgh

埃德·耶堡(Edd Yerburgh)

使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit tests with Tape and Vue Test Utils)

Tape is the fastest framework for unit testing Vue components.

磁带是用于Vue组件进行单元测试的最快框架。

In this article, we’ll see how to write Vue unit tests with Tape and Vue Test Utils.

在本文中，我们将看到如何使用Tape和Vue Test Utils编写Vue单元测试。

This tutorial is for users familiar with unit testing. If you’re new to unit testing check out unit testing Vue components for beginners.

本教程适用于熟悉单元测试的用户。如果您不熟悉单元测试，请为初学者查看单元测试Vue组件。

什么是胶带？ (What is Tape?)

Tape is a bare bones unit test framework that outputs the test report in TAP (Test Anything Protocol) format.

Tape是一个基本的单元测试框架，它以TAP (任何测试协议)格式输出测试报告。

It’s got a simple API to assert that your JavaScript and Vue components are behaving correctly.

有一个简单的API可以断言您JavaScript和Vue组件行为正确。

为什么要胶带？ (Why Tape?)

A couple weeks ago I ran some performance tests on different testing frameworks. I wanted to find out which framework was the fastest for testing Vue SFCs (Single File Components).

几周前，我在不同的测试框架上进行了一些性能测试。我想找出哪个框架是测试Vue SFC(单个文件组件)最快的框架。

I added Tape for completeness sake, and was shocked to find it was the fastest performing framework.

出于完整性考虑，我添加了Tape，但震惊地发现它是性能最快的框架。

To run tests in Tape, we need to do some setup. Let’s dive right in.

要在Tape中运行测试，我们需要进行一些设置。让我们潜入。

引导项目 (Bootstrapping the project)

I’ve made a simple starter project to start with. Git clone the project into a directory:

我已经做了一个简单的入门项目。 Git将项目克隆到目录中：

git clone https://github.com/eddyerburgh/jest-vue-starter.git

cd into it and install the dependencies:

cd到它，并安装依赖：

cd jest-vue-starter && npm install

Run the dev server as npm run dev to check out the app.

以npm run dev身份运行开发服务器以检出该应用程序。

It’s pretty simple. The the main point of this tutorial is to see how to set up Tape and Vue, not to write complex tests.

很简单本教程的重点是了解如何设置Tape and Vue，而不是编写复杂的测试。

设置Tape and Vue测试实用程序 (Setting up Tape and Vue Test Utils)

First thing to do is install Tape and Vue Test Utils:

首先要做的是安装Tape and Vue Test Utils：

npm install --save-dev tape @vue/test-utils

Vue Test Utils is in beta, so we need to request the version explicitly

Vue Test Utils是beta版，因此我们需要明确要求版本

Vue Test Utils needs a browser environment to run. This doesn’t mean we need to run the tests in a browser (thank fully!).

Vue Test Utils需要浏览器环境才能运行。这并不意味着我们需要在浏览器中运行测试(完全感谢！)。

We can use jsdom to set up a browser environment in Node. It adds global variables like document and window to Node.

我们可以使用jsdom在Node中设置浏览器环境。它将诸如document和window类的全局变量添加到Node。

jsdom is a bit of a pain to setup. Luckily some enterprising node developer made a wrapper library called browser-env.

jsdom设置起来有些麻烦。幸运的是，一些进取的节点开发人员制作了一个名为browser-env的包装库。

npm install --save-dev browser-env

We need to run browser-env before the tests. Tape lets us define files to run before the tests, we’ll do that in a sec.

测试之前，我们需要运行browser-env 。 Tape让我们定义了要在测试之前运行的文件，我们将在几秒钟内完成。

Vue SFCs need to be compiled before they’re tested. We can use require-hooks to run WebPack on files when they’re required in Node. It’s a simple setup.

Vue SFC必须先进行编译，然后再进行测试。当Node中需要文件时，我们可以使用require-hooks对文件运行WebPack。这是一个简单的设置。

First, install require-extension-hooks and its variants:

首先，安装require-extension-hooks及其变体：

npm install --save-dev require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue

Let’s make that setup file I spoke about earlier. Create a test directory, and add a setup.js file. The final path will be test/setup.js.

让我们制作我之前提到的安装文件。创建一个test目录，并添加一个setup.js文件。最终路径将是test/setup.js 。

We’re nearly there. Crazy stuff.

我们快到了。疯狂的事情。

Let’s write a smoke test in Tape. Create a new file called List.spec.js in the test directory. Full path test/List.spec.js. Copy the test below into the file:

让我们在Tape中编写烟雾测试。在测试目录中创建一个名为List.spec.js的新文件。全路径test/List.spec.js 将以下测试复制到文件中：

What’s going on there? We define a test, and get a t object in the callback. The t object contains assertion methods. It also has a plan method . We need to tell Tape how many tests it should expect.

那里发生了什么事？我们定义一个test ，并在回调中获得一个t对象。 t对象包含断言方法。它还具有plan方法。我们需要告诉Tape它应该进行多少测试。

Now we need a script to run the tests. Open the package.json and add this script:

现在我们需要一个脚本来运行测试。打开package.json并添加以下脚本：

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js"

This tells tape to run all .spec files in test/specs. The -r tells Tape to require or run test/setup before running our tests.

这告诉磁带运行test/specs所有.spec文件。 -r告诉Tape在运行test/setup之前require或运行test/setup 。

Run the unit tests:

运行unit测试：

npm run unit

Yay, we have a passing test. But hoo boy—that’s some ugly test output ☹️

是的，我们的考试通过了。但是hoo boy-那是一些难看的测试输出☹️

Remember I mentioned TAP earlier? This is TAP in it’s naked glory. Pretty ugly right? Don’t worry, we can prettify it.

还记得我之前提到过TAP吗？这是TAP裸露的荣耀。很丑吧？不用担心，我们可以美化它。

Install tap-spec:

安装tap-spec ：

npm install --save-dev tap-spec

We can pipe our TAP output from Tape. Edit the unit script to pipe the output to tap-spec:

我们可以通过管道传输TAP输出。编辑unit脚本以将输出通过管道传递到tap-spec ：

"unit": "tape ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

And run the tests again:

并再次运行测试：

npm run unit

Much better ?

好多了？

使用Tape and Vue测试实用程序编写测试 (Writing tests with Tape and Vue Test Utils)

Let’s write some tests then. Since we’re using Vue Test Utils, the tests are pretty readable.

然后让我们编写一些测试。由于我们使用的是Vue Test Utils，因此测试可读性强。

In List.spec.js, we’re going to write a test that passes an items array to List. We’ll use the shallow method from Vue Test Utils to shallow mount the component. shallow returns a wrapper containing the mounted component. We can use findAll to search the render tree for<li> tags, and check how many there are.

在List.spec.js ，我们将编写一个test是通过一个items数组List 。我们将使用shallow来自VUE考试utils的方法，以浅安装的组件。 shallow返回包含已安装组件的wrapper 。我们可以使用findAll在渲染树中搜索< li>标签，并检查有多少。

Copy the test from below into test/specs/List.spec.js.

从下面将test/specs/List.spec.js复制到test/specs/List.spec.js

Watch the tests pass with npm run unit. Notice we have a custom error message for out t.equals assertion. The default messages aren’t very readable, so it’s better to add our own.

使用npm run unit观看测试通过。请注意，对于t.equals断言，我们有一个自定义错误消息。默认消息不是很容易阅读，因此最好添加我们自己的消息。

Now add a new file test/specs/MessageToggle.spec.js. In here we’ll write a test for, you guessed it, MessageToggle.vue.

现在添加一个新文件test/specs/MessageToggle.spec.js 。在这里，我们将为您猜测的MessageToggle.vue编写一个测试。

We’re going to write two tests now. One will check the <;p> tag renders a default message. We’ll use shallow again to get a wrapper containing the mounted component, and use the text method to return the text inside the <p> tag.

我们现在要编写两个测试。将检查< ; p>标记是否呈现默认消息。 We'l l use s再次空心来获得安装部件包含一个包装，和我们e th e文方法返回文本insid et他<p>标签。

The second test is similar. We’ll assert that the message changes when the toggle-message button is pressed. To do that, we can use the trigger method.

第二项测试类似。我们将断言，按下toggle-message按钮后消息会发生变化。为此，我们可以使用trigger方法。

Copy the code below into test/specs/MessageToggle.spec.js:

将以下代码复制到test/specs/MessageToggle.spec.js ：

Run the tests again with npm run unit. Woop—green tests ?

使用npm run unit再次运行测试。哇，绿色测试？

磁带的优缺点 (Pros and cons of Tape)

Now we’ve added some tests, let’s look at the pros and cons of using Tape.

现在，我们添加了一些测试，让我们看一下使用Tape的优缺点。

优点 (Pros)

It’s fast
它很快

Like really fast ?
喜欢真的快吗？
It’s simple
这很简单

You can read the source code to
您可以阅读源代码来
It uses TAP.
它使用TAP 。

Because TAP is a standard, there are lots of programs that work directly with TAP
因为TAP是一个标准，所以有许多程序可以直接与TAP一起使用

Like the tap-spec module, we just piped some TAP text into it and it prettified it for us
像tap-spec模块一样，我们只是将一些TAP文本通过管道传输到其中，并为我们美化了它
Limited assertions
有限断言

Limited assertions keep your assertions easy to understand
有限的断言使您的断言易于理解

缺点 (Cons)

Limited assertions
有限断言

This is a con too
这也是一个缺点

You can get useful error messages with assertions like
您可以通过以下断言获得有用的错误消息：

hasBeenCalledWith, this is difficult to replicate with t.equal
hasBeenCalledWith ，很难用t.equal复制
It breaks
坏了

When you run more than 10000 tests
当您运行超过10000个测试时

You probably won’t hit that. But it might be a deal breaker for a large Vue project
您可能不会实现这一目标。但这对于大型Vue项目来说可能会破坏交易
It’s basic
这是基本的

You’ll need to use other libraries for mocking, stubbing and faking
您需要使用其他库来进行模拟，存根和伪造