快捷導(dǎo)航

TDesign在vitest的實(shí)踐示例詳解

更新時(shí)間：2022年07月23日 17:09:15 作者：PY

這篇文章主要為大家介紹了TDesign在vitest的實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

起源

在 tdesign-vue-next 的 CI 流程中，單元測試模塊的執(zhí)行效率太低，每次在單元測試這個(gè)環(huán)節(jié)都需要花費(fèi) 6m 以上。加上依賴按照，lint 檢查等環(huán)節(jié)，需要花費(fèi) 8m 以上。

加上之前在單元測試這一塊只是簡單的處理了一下，對(duì)開發(fā)者提交的組件也沒有相應(yīng)的要求，只是讓它能跑起來就好。另一方面單元測試目前是 TD 發(fā)布正式版的一個(gè)卡點(diǎn)，所以準(zhǔn)備對(duì)其進(jìn)行一次梳理和重構(gòu)，為后續(xù)的重點(diǎn)工作做準(zhǔn)備。

痛點(diǎn)與現(xiàn)狀

單元測試執(zhí)行效率太低，上面已經(jīng)講到了，這個(gè)速度是無法忍受。
單元測試規(guī)范不明確，開發(fā)者沒有對(duì)應(yīng)的單測規(guī)范可以遵循，不知道怎么寫。
單元測試中 snapshot 占據(jù)了大多數(shù)，每個(gè)組件的單元測試中其所有 demo 都做了一次 snapshot。這部分的代碼由腳本輸出。在一定程度上屬于集成測試，但執(zhí)行過程融合在人工寫的單元測試當(dāng)中，需要做集成測試的整合。

vitest

最開始注意到 vitest 是在 evan you 的分享里面。vitest 的特性如下:

與 Vite 的配置、轉(zhuǎn)換器、解析器和插件通用，免去了額外對(duì) jest 的配置
對(duì) TypeScript / JSX 支持開箱即用的，像寫組件一樣寫測試
多線程通過 tinypool 使用 Worker 線程盡可能多地并發(fā)運(yùn)行測試。隔離了每個(gè)測試文件的運(yùn)行環(huán)境，因此一個(gè)文件中的運(yùn)行環(huán)境改變不會(huì)影響其他文件。
watch 模式下極速熱更，在單元測試開發(fā)時(shí)更友好
與 Jest 幾乎相同的 API，極少量的差異
更清晰的 C8 生成測試覆蓋率
源碼內(nèi)聯(lián)測試
非常酷的 GUI

遷移

配置文件改造

依賴，上面說到，vitest 的配置文件和 vite 的配置文件共用，且插件也是共用，所以不需要像配置 jest 一樣去配置 babel-jest, vue-jest, jest-serializer-vue 這些插件。

開發(fā)環(huán)境

vitest 中開發(fā)環(huán)境的執(zhí)行命令

vitest --config site/vite.config.js

單測開發(fā)的過程中，需要過濾對(duì)應(yīng)的測試文件，則只需要加上對(duì)應(yīng)的文件路徑即可，具體如下：

#執(zhí)行button組件的單測
vitest --config site/vite.config.js button
#執(zhí)行button的index.test.jsx測試文件
vitest --config site/vite.config.js button/index.test.jsx

另外還有 GUI 的選項(xiàng)

vitest --config site/vite.config.js --ui

集成測試

之前我們繼承測試環(huán)境有兩套 ssr 環(huán)境和 csr 環(huán)境。

ssr 環(huán)境

對(duì) ssr 環(huán)境的測試需要做一個(gè) setup 用來做組件 render，此部分和之前保持一致。

ssr-setup

import { config } from '@vue/test-utils';
import { createApp } from 'vue';
import { renderToString } from '@vue/server-renderer';
import TDesign from '@/src/index';
config.global.plugins = [TDesign];
// global掛載createSSRApp方法，掛載render環(huán)境的配置
config.global.createSSRApp = (comp) => {
  const app = createApp(comp);
  app.config.globalProperties.$route = {};
  app.use(TDesign);
  const html = renderToString(app);
  return html;
};

之前的執(zhí)行環(huán)境是 commonjs 引入組件使用的是 require, 在 vite 中需要替換為 es 規(guī)范的 import

const demo = require(`../.${file}`);

ssr.test.js

import glob from 'glob';
import MockDate from 'mockdate';
import { config } from '@vue/test-utils';
MockDate.set('2020-12-28 00:00:00');
function runTest() {
  const files = glob.sync('./examples/**/demos/*.vue');
  const { createSSRApp } = config.global;
  describe('ssr snapshot test', () => {
    files.forEach((file) => {
      it(`ssr test ${file}`, async () => {
        const demo = await import(`../.${file}`); //此部分
        const realDemoComp = demo.default ? demo.default : demo;
        const html = await createSSRApp(realDemoComp);
        expect(html).toMatchSnapshot();
      });
    });
  });
}
runTest();

csr 環(huán)境

csr 環(huán)境的集成測試在之前使用的是腳本輸出一個(gè)如下的標(biāo)準(zhǔn)文件，分散在每個(gè)組件的單元測試?yán)锩?。這樣做影響單元測試的執(zhí)行效率，對(duì)每個(gè)組件都開一個(gè) describe, 這些代碼會(huì)影響單元測試的代碼結(jié)構(gòu)。所以合并在一個(gè)文件執(zhí)行是最合理的。其實(shí)現(xiàn)思路與ssr基本一致，只是 render 不一樣而已。

/**
 * 該文件為由腳本 `npm run test:demo` 自動(dòng)生成，如需修改，執(zhí)行腳本命令即可。請(qǐng)勿手寫直接修改，否則會(huì)被覆蓋
 */
import { mount } from '@vue/test-utils';
import baseVue from '@/examples/affix/demos/base.vue';
import containerVue from '@/examples/affix/demos/container.vue';
const mapper = {
  baseVue,
  containerVue,
};
describe('Affix', () => {
  Object.keys(mapper).forEach((demoName) => {
    it(`Affix ${demoName} demo works fine`, () => {
      const wrapper = mount(mapper[demoName]);
      expect(wrapper.element).toMatchSnapshot();
    });
  });
});

csr.test.js

import glob from 'glob';
import MockDate from 'mockdate';
import { mount } from '@vue/test-utils';
MockDate.set('2020-12-28 00:00:00');
function runTest() {
  const files = glob.sync('./examples/**/demos/*.vue');
  describe('csr snapshot test', () => {
    files.forEach((file) => {
      it(`csr test ${file}`, async () => {
        const demo = await import(`../.${file}`);
        const realDemoComp = demo.default ? demo.default : demo;
        realDemoComp.name = `test-csr-${realDemoComp.name}`;
        const wrapper = mount(realDemoComp);
        expect(wrapper.element).toMatchSnapshot();
      });
    });
  });
}
runTest();

配置文件

vitest 的配置文件如下，下面這一段 config 只需要掛在 vite.config.js 的 test 選項(xiàng)即可.

const testConfig = {
  include:
    process.env.NODE_ENV === 'test-snap'
      ? ['test/snap/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
      : ['test/unit/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  globals: true,
  environment: 'jsdom',
  testTimeout: 5000,
  setupFiles: process.env.NODE_ENV === 'test-snap' ? path.resolve(__dirname, '../script/test/test-setup.js') : '',
  transformMode: {
    web: [/\.[jt]sx$/],
  },
  coverage: {
    reporter: ['text', 'json', 'html'],
  },
};

兼容性

因?yàn)槲覀兝系臏y試方案基于 jest，相應(yīng)的 API 都有。所以在遷移過程中，兼容性問題基只有一些從 jest 中的函數(shù)，切換到 vi，其他問題沒有遇到。

before

const fn = jest.fn();

after

import { vi } from 'vitest';
const fn = vi.fn();

結(jié)果

CI測試速度提升

在 CI 中從原來的 6m 提升到 2m30, 執(zhí)行效率提升百分之 60%，在開發(fā)機(jī)的執(zhí)行效率更高（不同配置的機(jī)器執(zhí)行效率不同，用 ci 中的標(biāo)準(zhǔn)執(zhí)行做對(duì)比測試）。

更清爽的日志信息

jest 這一部分的 log 只是單個(gè)組件的日志，而整個(gè) log 記下來是非常長的，導(dǎo)致我們?cè)陂_發(fā)中會(huì)忽略掉很多日志的告警。本地的 terminal 輸出的長度是有限制的。而 vitest 的 log 則非常清爽。

源碼傳送門

以上就是TDesign在vitest的實(shí)踐示例詳解的詳細(xì)內(nèi)容，更多關(guān)于TDesign在vitest實(shí)踐的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具