如何在 Jest 中测试 Vue？请看这里-JavaScript中文网-JavaScript教程资源分享门户

Vue 是一个流行的 JavaScript 框架，它专门用于构建交互式的、单页的 Web 应用程序。在 Vue 应用程序中，我们可以通过编写组件来构建用户界面。

当我们在构建一个 Vue 应用程序时，我们需要确保我们的代码是正确的，并且行为良好。为了达到这个目的，我们可以使用 Jest 这个 JavaScript 测试框架来帮助我们进行测试。这个框架可以帮助我们编写自动化测试，以确保我们的代码不会引入新的 bug。

在本文中，我将向您介绍如何使用 Jest 来测试您的 Vue 组件。我将为您提供一些实用的示例代码，以及一些需要注意的地方。有了这些信息，我相信您将会轻松地编写出高质量的 Vue 代码。

Vue 组件的结构

在 Vue 中，组件是一个抽象的概念。简单来说，组件是可重用的 Vue 实例，带有一个带 props 的输入、一个 JavaScript 方法的输出和一些生命周期钩子。

Vue 组件通常是由模板（template）、JS 代码（script）和样式（style）三个部分组成。

-- -------------------- ---- -------
----------
  ---- -------------------- -- ---- --------
-----------

--------
------ ------- -
  ------ -
    ----- ------
  -
-
---------

-------
------ - ---------- ----- -
--------

在这个组件中，我们定义了一个 hello 组件。这个组件有一个属性 name，用于在页面中显示一个问候语。

在 Jest 中测试 Vue 组件

为了在 Jest 中测试 Vue 组件，我们需要使用一个称为 vue-test-utils 的工具。这个工具可以帮助我们编写自动化测试来测试我们的 Vue 组件。

安装 `vue-test-utils`

在安装 vue-test-utils 之前，我们需要先安装并配置好 Jest。如果您还没有安装 Jest，则可以通过运行以下命令来安装：

npm install --save-dev jest

要安装 vue-test-utils，我们可以运行以下命令：

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

安装完成之后，我们可以开始编写测试了。

编写一个简单的 Vue 组件测试

假设我们要测试一个 Vue 组件，它有一个名为 Awesome 的属性，用于在页面中显示一个漂亮的文本。我们可以编写一个简单的测试来查看这个组件是否正确地渲染。以下是一个测试的示例代码：

-- -------------------- ---- -------
------ - ------------ - ---- -----------------
------ ------- ---- ---------------

------------------- -- -- -
  ---------- ------ --------- ---- -------- ------- -- -- -
    ----- ------- - --------------------- -
      ---------- - ----- ------------ -
    --

    ---------------------------------------- -------------
  --
--

在这个测试中，我们首先从 @vue/test-utils 中导入 shallowMount 方法，并将我们要测试的 Vue 组件 Awesome 导入到测试代码中。

接下来，我们编写了一个名称为 Awesome 的测试用例。这个测试用例中，我们使用 shallowMount 方法来渲染我们的组件，然后使用 propsData 属性来设置我们要传递给组件的属性。

然后，我们断言组件是否正确地渲染。我们使用了 Jest 中的 expect() 方法来测试组件中的文本是否匹配我们所期望的内容。在这种情况下，我们期望在页面上看到一个问候语，与我们在 propsData 中提供的名称相匹配。

为 Vue 组件编写更多测试

除了运行最基本的测试之外，我们还可以为我们的 Vue 组件编写更多的测试，以确保它们可以正确地工作。

测试组件生命周期

Vue 组件有一组生命周期钩子，可以让我们在组件生命周期中执行代码。我们可以编写一些测试来确保这些生命周期钩子正确地工作。

以下是一个测试组件 mounted 钩子的示例代码：

describe('Awesome', () => {
  it('should call mounted hook', () => {
    const mountedSpy = jest.spyOn(Awesome.methods, 'mounted')
    const wrapper = shallowMount(Awesome)

    expect(mountedSpy).toHaveBeenCalled()
  })
})

在这个测试中，我们使用 jest.spyOn() 方法来创建一个 spy，它可以帮助我们跟踪组件 methods 对象中的 mounted 函数的调用次数。我们然后使用 shallowMount 方法来创建一个组件实例，接着就可以断言组件是否运行了 mounted 钩子。

测试组件行为

Vue 组件的行为由它的方法和交互定义。我们可以编写一些测试来确保组件在交互时执行正确的操作。

以下是一个测试用户输入是否正确处理和提交的示例代码：

-- -------------------- ---- -------
------------------- -- -- -
  ---------- ---- - ------ ----- -- ------ ------- -- -- -
    ----- ----- - ---------------------
    ----- ------ - ----------------------
    ----- ------------ - ------- -------
    ----------------------------

    -----------------------

    ---------------------------------------------
    ------------------------------------------------------------
  --
--

在这个测试中，我们首先使用 wrapper.find() 方法来查找 .input 和 button 元素。随后，我们使用 input.setValue() 方法来模拟用户的输入。

接下来，我们触发 button 元素的 click 事件，并断言组件是否发出了 submit 事件，并确认事件的结果与我们输入的值相同。

结论

在本文中，我们介绍了如何使用 Jest 和 vue-test-utils 测试 Vue 组件。我们了解了如何测试基本的 Vue 组件和一些更复杂的组件行为和生命周期。我希望您能从本文中获得一些有用的知识，并开始编写更高质量的 Vue 代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6773a9136d66e0f9aae5e6ad

如何在 Jest 中测试 Vue？请看这里