使用 Jest 测试 Vue.js 应用

随着 Vue.js 的流行和开发社区的扩大,Vue.js 已成为许多前端工程师的首选框架。而为了保证代码质量和可靠性,测试是不可或缺的一步。Jest 是一个比较流行的前端测试框架,本文将介绍如何使用 Jest 测试 Vue.js 应用。

安装 Jest

安装 Jest 很简单,只需要在项目中输入以下命令即可:

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

vue-jest 是 Jest 与 Vue.js 交互的插件,@vue/test-utils 是 Vue.js 官方提供的测试工具。

简单的 Vue.js 组件测试

首先让我们创建一个简单的 Vue.js 组件并测试它。以下是我们要测试的组件代码:

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

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

现在我们来编写测试代码,保存在 sample.spec.js 文件中:

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

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

我们使用 shallowMount 方法从 Vue.js 测试工具中获取 SampleComponent 的实例,并测试其 titledescription 是否正确渲染。在 terminal 中运行以下命令测试:

--- ----

如果在测试过程中出现错误,你会看到类似于下面的输出:

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

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

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

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

    -----------

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

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

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

Vue.js 组件中的异步操作测试

当 Vue.js 组件中涉及异步操作时,我们需要相应地处理测试。以下是带有异步操作的组件代码:

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

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

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

我们在组件的 created 钩子函数中使用了异步 this.$axios.get 方法获取数据。现在,我们需要进行一些更高级的测试来确保异步数据获取正确。

以下是 src/api.js 文件中模拟 axios.get 的代码:

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

现在我们已经准备好开始测试异步操作。以下是测试代码:

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

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

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

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

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

我们使用 jest.mock 方法将 axios.get 置换为一个模拟方法,并在测试开头调用 mockResolvedValueOnce 方法模拟数据返回。在测试过程中,我们使用 async/await 等待下一次更新,然后断言正确的标题和说明是否被渲染。

Vue.js 组件中的事件测试

在组件的 methods 中涉及到的事件也需要进行测试,包括执行事件后的状态改变等。以下是我们要测试的组件代码:

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

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

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

在上面的组件中,我们使用 @click 事件处理程序切换显示说明。以下是测试代码:

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

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

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

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

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

我们使用 mount 方法创建组件的更完整的实例,并测试点击按钮后说明的正确显示和隐藏。

结论

在本文中,我们介绍了使用 Jest 测试 Vue.js 应用程序的基础知识和一些技巧。测试是开发过程中至关重要的一步,能够保证代码在各种环境下的可靠性和正确性,并对应用程序进行持续集成和交付做出贡献。

参考:

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b715d9babaf620fab9945