前言

最近在看前端自動化測試相關的東西，在搭建環(huán)境的時候發(fā)現(xiàn)還是有許多需要注意的地方，而且網上很少有將各種測試（單元測試，集成測試，端對端測試）的環(huán)境搭建都提及的文章，對像我這樣的新手不太友好，于是便打算刪繁就簡，希望通過這一篇文章能讓大家對Vue項目中自動化測試環(huán)境的搭建有個初步的認識，并且能夠實現(xiàn)簡單的測試用例，主要內容有：

• 單元測試環(huán)境搭建與案例實踐（非瀏覽器環(huán)境）
  • 使用Jest測試工具函數
  • 使用Jest+Vue Test Utils測試Vue組件
• 端對端測試環(huán)境搭建與案例實踐（瀏覽器環(huán)境）
  • 使用Cypress測試頁面

之所以沒提及集成測試，是因為對前端而言，很難區(qū)分出單元測試和集成測試，普遍認為前端中的單元測試包括了集成測試，有關三種測試的區(qū)別，通過下面一張表希望能讓大家對單元/集成/端對端測試有個初步的認識，感興趣的可以繼續(xù)了解一下測試金字塔和獎杯模型。

本文所用的框架是vue2，測試工具有Jest，Vue Test Utils和Cypress，選擇它們的原因很簡單：

圖片來自于The State of JS 2021: 測試工具

好吧，其實是因為：

• Jest??All in one, 開箱即用

• Vue Test Utils??官網推薦

• Cypress??All in one, 開箱即用

在開始之前，我們需要有一個新的vue2項目，這個相信大家有“手”（腳手架的手）就行，直接vue create first_test。這里選擇的是默認安裝，也可以利用腳手架安裝測試框架，但這不太現(xiàn)實，因為我們往往是對一個已有的項目進行測試，而不是在開發(fā)階段就已經考慮到了測試??????

接下來我們一起在一個已有項目（這里是vue2新項目）中引入Jest和Cypress

單元測試環(huán)境搭建與案例實踐

安裝 Jest

運行npm install jest --save-dev ，也可以使用簡化的命令npm i jest -D

"devDependencies": {
	...
    "jest": "^29.1.2",
    ...
},

函數測試實踐

在項目根目錄下新建tests/unit文件夾，用于存放單元測試的執(zhí)行文件；在src目錄下新建utils文件夾，用于存放工具函數。

F:. 
│--src 
│   │--utils 
|          sum.js
│--tests
|   │--unit
|         first_unit.spec.js

編寫第一個單元測試用例first_unit.spec.js，來測試一個簡單的求和函數sum.js，代碼如下

// front_test/src/utils/sum.js

function sum(a, b) {
  return a + b;
}

module.exports = sum;

// front_test/tests/unit/first_unit.spec.js

const sum = require("../../src/utils/sum");

describe("first jest test", () => {
  it("test 1", () => {
    expect(sum(1, 2)).toBe(3);
  });
  it("test 2", () => {
    expect(sum(Infinity, Infinity)).toBe(Infinity);
  });
});

在package.json中配置啟動命令

  "scripts": {
    "test:unit": "jest"
  },

然后在命令行輸入npm run test:unit first_unit.spec.js，出現(xiàn)綠色的PASS就說明測試通過了??????

Jest 常用配置

• 配置Babel來讓Jest支持ES6語法

  • npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0

  • 在babel.config.js中作如下配置

    module.exports = {
      presets: ["@babel/preset-env"],
    };
    

  • 在項目根目錄下新建jest的配置文件jest.config.js，作如下配置

    module.exports = {
      transform: {
        "\\.[jt]sx?$": "babel-jest", 
      },
    };
    

• 配置別名

  • 在jest.config.js中添加如下配置

    module.exports = {
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    };
    

• 以上配置完成后，first_unit.test.js中的const sum = require("../../src/utils/sum");就可以寫成import sum from "@/utils/sum.js"了

其它的諸如支持typescript、生成覆蓋率文件、使用webpack等的配置方法可以根據自己的需要參考官網

Vue Test Utils 的安裝與配置

使用Jest可以進行DOM測試、異步代碼測試和快照測試等，但正如Jest本身的定位——一個令人愉快的javascript測試框架。也就是.js文件，所以要想對.vue文件進行測試，還需要安裝Vue官方提供的Vue Test Utils庫，按官方的說法就是，它“是偏底層的組件測試庫，可以提供對 Vue 特定 API 的訪問”

運行npm install --save-dev @vue/test-utils@1 vue-jest，由于是vue2的項目，所以這里指定了@vue/test-utils的版本為v1

然后在jest.config.js中作如下配置

module.exports = {
  moduleFileExtensions: ["js", "json", "vue"],
  transform: {
    ".*\\.(vue)$": "vue-jest",
  },
};

組件測試實踐

在src/components下新建Parent.vue和Child.vue

// front_test/src/components/Parent.vue

<template>
  <div>
    <span v-show="showSpan">Parent</span>
    <child v-if="showChild"></child> // Child組件
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Parent",

  components: {
    Child,
  },

  data() {
    return {
      showSpan: false,
      showChild: false,
    };
  },
};
</script>

// src/components/Child.vue

<template>
  <div>Child</div>
</template>

<script>
export default {
  name: "Child",
};
</script>

??我們要測的是，在Parent.vue中：

• 當showSpan為true時，span標簽可以顯示
• Child組件默認不會顯示

編寫的測試用例first_vue.spec.js如下

// front_test/tests/unit/first_vue.spec.js
import { mount } from "@vue/test-utils";
import Parent from "@/components/Parent.vue";
import Child from "@/components/Child.vue";

describe("Parent", () => {
  it("does render a span", () => {
    const wrapper = mount(Parent, { // 掛載被測的組件
      data() {
        return {
          showSpan: true,
        };
      },
    });
    expect(wrapper.find("span").isVisible()).toBe(true); //find()用于查找元素,isVisible()用于測試v-show元素是否可見
  });

  it("does not render a Child component", () => {
    const wrapper = mount(Parent);
    expect(wrapper.findComponent(Child).exists()).toBe(false); //findComponent()用于查找組件，exist()用于測試v-if元素是否存在
  });
});

運行npm run test:unit first_vue.spec.js，但是報了如下錯誤

 > [vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment.
 > You can run the tests in node using jsdom

這是jest版本的問題，解決方法是降為v27，并在jest.config.js中配置測試環(huán)境：

module.exports = {
  testEnvironment: "jsdom",
};

之后再運行npm run test first_vue.spec.js就可以了??????

端對端測試環(huán)境搭建與案例實踐

安裝Cypress

Cypress的安裝與Jest一樣，直接npm i cypress -D

"devDependencies": {
    ...
    "cypress": "^10.9.0",
    ...
},

安裝Cypress后，有兩種方式可以打開Cypress

• 直接在當前目錄運行npx cypress open
• 切到node_modules/.bin目錄下運行cypress open

運行npx cypress open，會出現(xiàn)Cypress的UI界面，同時在項目根目錄下會自動生成cypress文件夾和cypress.config.js配置文件，可以看到默認的測試用例first_e2e.cy.js通過

F:. 
│--cypress
|   │--e2e // 存放測試用例
|   |     first_e2e.cy.js
|   │--fixtures // 存放靜態(tài)資源
|   |     example.json
|   │--support // 配置全局注入文件
|         command.js
|         e2e.js
│--src 

// first_e2e.cy.js
describe("empty spec", () => {
  it("passes", () => {
    cy.visit("https://example.cypress.io");
  });
});

Cypress常用配置

• 啟動命令

在package.json中配置啟動命令

  "scripts": {
    "test:e2e": "cypress open"
  },

之后就可以使用npm run test:e2e來打開Cypress了

• 項目文件夾

默認建立的cypress文件夾是在根目錄下，為了方便管理，在之前建立的tests文件夾下新建e2e文件夾，并將cypress文件夾中的內容全部CV過去，同時在cypress.config.js文件中添加如下配置：

// cypress.config.js
baseUrl: "http://localhost:8080", // 默認測試域名
fixturesFolder: "tests/e2e/fixtures", // 外部靜態(tài)數據
screenshotsFolder: "tests/e2e/screenshots", // 屏幕快照
videosFolder: "tests/e2e/videos", // 錄制視頻
specPattern: "tests/e2e/specs/*.cy.{js,jsx,ts,tsx}", // 測試用例文件
supportFile: "tests/e2e/support/e2e.{js,jsx,ts,tsx}", // 配置全局注入
viewportHeight: 768, // 測試瀏覽器視口高度
viewportWidth: 1366, // 測試瀏覽器視口寬度

之后就可以刪掉cypress文件夾了，由于對cypress.config.js作了改動，所以需要重新啟動Cypress來讓配置生效

在這里事先將測試文件中的cy.visit("https://example.cypress.io")改成了cy.("/")，并運行npm run serve將項目跑起來，這樣就可以對我們的新建項目進行測試了

可以看到運行npm run test:e2e后沒任何問題??????

下面我們就對打開的http://localhost:8080
頁面進行測試。E2E測試旨在模擬用戶真實的操作，確保應用在真實環(huán)境運行下一切正常工作，下面我們測試頁面跳轉的過程，測試內容有：

• 當前頁面h1的內容為Welcome to Your Vue.js App
• 點擊鏈接會跳轉到Vue Cli官方文檔，同時不打開新標簽頁
• 在Vue Cli官方文檔的輸入框中輸入@vue/cli-service

測試用例代碼如下：

// tests/e2e/specs/first_e2e.cy.js

describe("tests vue2", () => {
  it("passes", () => {
    cy.visit("/"); // 訪問默baseUrl
    
    cy.get("h1").should("contain", "Welcome to Your Vue.js App"); // 獲取并斷言h1內容
    
    cy.get('[data-test="vuecli"]').invoke("removeAttr", "target").click(); // 獲取并點擊vuecli鏈接
    
    cy.url().should("include", "cli.vuejs.org"); // 斷言url內容
    
    cy.get("input").type("@vue/cli-service"); // 獲取輸入框并輸入內容
  });
});

• 這里為vuecli鏈接添加了data-test屬性以方便在測試時選擇，詳細可以參考Best Practices

// HelloWorld.vue
...
  <a
    data-test="vuecli"
    
    target="_blank"
    rel="noopener"
    >vue-cli documentation</a>
...

• 另外，上述標簽的target屬性值為_blank，所以會在新標簽頁打開鏈接，而Cypress由于其自動化測試的機制問題，是不支持多標簽頁測試的，因此在這里通過.invoke使用了jQuery的removeAttr方法，在點擊前將
  target屬性去除，然后就可以在同一標簽頁打開新頁面來進行測試
• 除了cypress open，我們也可以運行cypress run命令，在不打開App的headless模式下進行測試，同時Cypress還會自動記錄測試的整個過程，將視頻和截圖保存到配置的文件夾中，可自行在package.json中配置相關命令，這里我沒配置，就直接在項目根路徑下輸入

npx cypress run --browser chrome // 指定運行環(huán)境為chrome瀏覽器

記錄的測試過程如下

遇到的問題

• 安裝Cypress后，運行npx cypress open時報錯：

   No version of Cypress is installed in: C:\Users\ChenH\AppData\Local\Cypress\Cache\10.9.0\Cypress 
   Please reinstall Cypress by running: cypress install
  

  ??這是由于缺少執(zhí)行文件，有兩種方法來解決：

  先從https://download.cypress.io/desktop.json
  下載對應版本的安裝包，這里是v10.9.0

  • 方法1：自行解壓縮后，CV到C:\Users\ChenH\AppData\Local\Cypress\Cache\10.9.0\Cypress下

  • 方法2：運行set CYPRESS_INSTALL_BINARY=d:\cypress.zip設置環(huán)境變量為該壓縮包的路徑，然后重新運行npm i cypress -D

  然后再運行npx cypress open就可以打開Cypress了

• 運行E2E測試案例時報錯

   Cypress detected a cross origin error happened on page load: 
   > Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.
  

  ??這是“同源策略”導致的，按照提示在cypress.config.js中配置chromeWebSecurity: false就行

參考資料

快速入門 · Jest 中文文檔 | Jest 中文網 (jestjs.cn)

Installation | Vue Test Utils (vuejs.org)

Writing Your First E2E Test | Cypress Documentation

Front-End Testing is For Everyone | CSS-Tricks - CSS-Tricks文章來源地址http://www.zghlxwxcb.cn/news/detail-598408.html

到了這里，關于一文，教你搭建前端自動化測試環(huán)境的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！