這章想學到什麼？

• 支援不同瀏覽器 console 寫法 （補）
• 一個 assert 測試方法實現的簡單寫法（補）
• 看看不同的測試框架，基於前端開發工具測試工具 vitest

程式碼閱讀練習與撰寫

支援不同瀏覽器 console 寫法（補）

function log() {
  try {
      console.log.apply(console, arguments);
  }
  catch(e) {
      try {
          opera.postError.apply(opera, arguments);
      }
      catch(e) {
          alert(Array.prototype.join.call(arhuments, " "))
      }
  }
}

一個 assert 測試方法實現的簡單寫法（補）

https://jsfiddle.net/4ca76wy5/

看看不同測試框架，基於前端開發工具 vitest

如果你是用 vite 作為前端開發建置的工具，Vitest 是一個由 Vite 提供支持的單元測試框架。

官網文件有提到了 StackBlitz 這樣的工具，我們可以在上面測試 Vitest 玩看看。

# 斷言
expect(Math.sqrt(4)).toBe(2)

# 測試群組
describe('suite', () => {
  it('serial test', async() => { /_ ... _/ })
  it.concurrent('concurrent test 1', async() => { 
    test('Math.sqrt()', () => {
      expect(Math.sqrt(4)).toBe(2)
      expect(Math.sqrt(144)).toBe(12)
      expect(Math.sqrt(2)).toBe(Math.SQRT2)
    })
   })
  it.concurrent('concurrent test 2', async() => { 
    test('JSON', () => {
      const input = {
        foo: 'hello',
        bar: 'world',
      }
    
      const output = JSON.stringify(input)
    
      expect(output).eq('{"foo":"hello","bar":"world"}')
      assert.deepEqual(JSON.parse(output), input, 'matches original')
    })
    
   })
})

# 非同步
import { test, expect, vi } from 'vitest';
test('Test Fn', () => {
  const fn = vi.fn();
  fn('hello', 1);
  expect(vi.isMockFunction(fn)).toBe(true);
  expect(fn.mock.calls[0]).toEqual(['hello', 1]);
  fn.mockImplementation((arg) => arg);
  fn('world', 2);
  expect(fn.mock.results[1].value).toBe('world');
});

測試畫面

The more elaborate our means of communication, the less we communicate. —— Joseph Priestley

參考資料

下一代前端工具 ViteJS
https://cn.vitest.dev/guide/features.html
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function