什么是代碼測試覆蓋率？

在執行一組測試期間執行的代碼百分比稱為測試覆蓋率。 它可以衡量有多少代碼庫經過了測試，并可能指出代碼中可能沒有接受足夠測試的部分。 在這篇文章中，我們將討論在 JAVAScript React 項目中增強測試覆蓋率的幾種方法。

1. 確保所有新代碼都經過測試。 確保任何新代碼都伴隨至少一個測試是增加測試覆蓋率的最佳策略之一。 這保證了測試正在使用新代碼，并有助于在錯誤出現時立即識別它們。
2. 使用代碼覆蓋工具 您可能會發現您的代碼庫的某些部分是否未使用各種方法進行測試。 這些工具可以用作測試套件的一個組件，并提供一份報告，顯示被測試代碼的比例。 Jest 和 Istanbul 是兩種常見的 JavaScript 工具。
3. 對于邊緣情況，創建測試。 測試是至關重要的，不僅只盲目樂觀，而且對于最初可能并不明顯的幾種邊緣情況也是如此。 多虧了這個，否則可能會被忽視的角落實例可能會被發現。
4. 利用測試框架 Mocha、Jasmine 和 Jest 等測試框架提供的功能和斷言使編寫和組織測試變得更簡單。 這些框架中經常包含代碼覆蓋率工具，這使得在添加額外測試時跟蹤測試覆蓋率變得更加簡單。
5. 創建單元測試 單元測試是簡短的獨立測試，用于評估單段代碼，例如函數。 編寫一組單元測試可以在問題發生時更容易發現問題，并確保代碼的所有組件都經過測試。

所以基本上，增加測試覆蓋率是維護 JavaScript React 項目中代碼庫完整性的關鍵步驟。 您可以幫助確保您的代碼經過廣泛測試，并通過使用上述過程及早發現任何錯誤。

React 項目中的代碼覆蓋率是如何工作的？

這是一個代碼覆蓋工具如何用于使用 React 創建的項目的示例。

先安裝一個代碼覆蓋程序，比如nyc。 為此，執行以下命令：

npm install --save-dev nyc

然后可以使用 nyc 命令運行測試并提供代碼覆蓋率報告。 例如，如果您使用 Jest 作為測試運行程序，您可以更改 package.json 文件以添加以下腳本：

"scripts": {
  "test": "nyc jest"
}

現在，nyc 將執行您的測試并在您運行 npm test 時生成代碼覆蓋率報告。 通過在瀏覽器中啟動文件 coverage/index.html，您可以查看報告。

您可以在 package.json 文件中定義一個覆蓋率閾值，以確保您的測試覆蓋率在可接受的范圍內。 請參見下面的示例。

"nyc": {
  "check-coverage": true,
  "lines": 80,
  "statements": 80,
  "branches": 80,
  "functions": 80
}

如果任何提供的指標的覆蓋率低于 80%，測試將失敗。

通過向每個新代碼添加測試并針對邊緣情況進行測試，除了使用代碼覆蓋率工具之外，您還可以增加測試覆蓋率。 此外，為了簡化測試的編寫和組織，您可以使用 Mocha 或 Jasmine 等測試框架。

這是一個 React 組件的描述以及一些 Jest 測試。

export default function MyComponent() {
  return (
    <>
      <div>
        <h1>My Component</h1>
        {props.children}
      </div>
    </>
  );
}

現在檢查這個測試示例，它對組件 MyComponent 具有出色的代碼覆蓋率。

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the correct content', () => {
    const wrApper = shallow(
      <MyComponent>
        <p>Hello World</p>
      </MyComponent>
    );
    expect(wrapper.find('h1').text()).toEqual('My Component');
    expect(wrapper.find('p').text()).toEqual('Hello World');
  });
});

該測試通過測試“h1”元素的繪制和 props.children 元素的渲染來全面涵蓋該功能。

正如您在這張測試圖中看到的那樣，代碼覆蓋率不足的相同組件的測試沒有那么完善。

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the correct content', () => {
    const wrapper = shallow(
      <MyComponent>
        <p>Hello World</p>
      </MyComponent>
    );
    expect(wrapper.find('h1').text()).toEqual('My Component');
  });
});

本次測試不測試 props.children 元素的渲染； 它只測試“h1”元素的渲染。 結果，它為功能提供了不充分的覆蓋。

您可以包含一個額外的測試來模擬 props.children 元素的呈現，以增加此測試的代碼覆蓋率。