深入分析beforeEach函數

一、beforeEach怎麼讀

beforeEach函數是Jasmine中的一個生命周期函數，它在測試套件中的每個用例執行前都會被調用。在中文中，beforeEach函數直譯為「在每個事情發生前」，也就是在每個用例執行前。

在測試過程中使用beforeEach函數有助於減少重複代碼，同時方便了測試數據的初始化和清理。在Jasmine中，beforeEach函數是一個開放的鉤子函數，我們可以在該函數中進行測試用例相關的準備工作。

二、beforeEach首次不執行

在beforeEach函數中的代碼不會在測試套件執行前執行，而是在測試用例第一次執行前執行。例如：

beforeEach(() => {
  console.log("beforeEach");
})

it("測試用例 1", () => {
  console.log("測試用例 1");
})

it("測試用例 2", () => {
  console.log("測試用例 2");
})

以上代碼輸出結果為：

測試用例 1
beforeEach
測試用例 2
beforeEach

beforeEach函數第一次執行是在第一個測試用例執行前，而不是在測試套件執行前。這種行為是Jasmine設計的一個特性，主要是方便開發者針對每個具體測試用例進行測試。

三、beforeach跟aftereach

beforeEach和afterEach是一對生命周期函數，分別表示在測試套件中的每個用例執行前和執行後運行指定的代碼。當我們需要在每個用例執行前後進行統一的準備和清理工作時，beforeEach和afterEach結合使用可以很好地完成這一任務。

以下是beforeEach和afterEach的示例代碼：

beforeEach(() => {
  console.log("beforeEach");
})

afterEach(() => {
  console.log("afterEach");
})

it("測試用例 1", () => {
  console.log("測試用例 1");
})

it("測試用例 2", () => {
  console.log("測試用例 2");
})

以上代碼輸出結果為：

測試用例 1
afterEach
beforeEach
測試用例 2
afterEach
beforeEach

beforeEach和afterEach函數分別在每個測試用例執行前和執行後分別被調用，執行順序是 beforeEach()->test case-> afterEach()-> beforeEach()->test case-> afterEach()。

四、each和every區別

Jasmine中的each函數和every函數都可以用於測試集的遍歷，它們的區別在於它們是如何處理非同步數據的

當我們需要測試一個數組中的每個元素，可以使用each函數，例如：

describe("測試集合", () => {
  const test_data = [1, 2, 3];
  beforeEach(() => {
    console.log("beforeEach");
  })
  it("測試", () => {
    expect().nothing();
  })
  afterEach(() => {
    console.log("afterEach");
  })

  test_data.forEach((item) => {
    it(`測試 ${item}`, () => {
      console.log(item);
    })
  })
})

以上代碼輸出結果為：

測試 1
測試 2
測試 3

而如果使用every函數來遍曆數組，則要使用async/await的方式處理它的非同步特性。

describe("測試集合", () => {
  const test_data = [1, 2, 3];
  beforeEach(() => {
    console.log("beforeEach");
  })
  it("測試", () => {
    expect().nothing();
  })
  afterEach(() => {
    console.log("afterEach");
  })

  test_data.every(async (item) => {
    await it(`測試 ${item}`, () => {
      console.log(item);
    })
    return true;
  })
})

以上代碼的輸出結果與前面的each函數遍歷結果相同。

五、beforeEach函數完整代碼示例

describe("測試集合", () => {
  const test_data = [1, 2, 3];
  beforeEach(() => {
    console.log("beforeEach");
  })
  it("測試", () => {
    expect().nothing();
  })
  afterEach(() => {
    console.log("afterEach");
  })

  test_data.forEach((item) => {
    it(`測試 ${item}`, () => {
      console.log(item);
    })
  })
})

以上代碼為beforeEach函數的一個完整示例，使用beforeEach函數可以有效地進行測試集合的初始化，避免了重複代碼和UI自動化測試誤判的發生。