開玩笑的模擬功能

Question

我是JavaScript測試的新手，目前正在嘗試為我創建的商店（只是ES6類）編寫一些測試用例。 我使用的是Jest，因為這是我們通常用於React項目的內容，盡管這里我不是在測試React組件，而只是在包裝一個功能類。

我正在測試的類擴展了另一個類，並在其中定義了各種方法。 我想測試這些方法（是否被調用），以及類中聲明的屬性是否以及何時調用相應的類方法而進行測試。

現在，我已經閱讀了有關模擬函數的信息，但據我了解，它們只能執行檢查功能的次數，例如調用函數的次數，但不能復制該功能。 但就我而言，我需要這些方法的功能，因為我將檢查這些方法在調用時更改的類成員值。

我不確定這是否是正確的方法。 在沒有模擬的情況下在Jest中測試函數是否錯誤？ 並據此推論功能的內部運作？ 我們在測試時何時模擬函數？

我面臨的問題是我正在處理的項目很大，其中的類/函數具有多個級別的依賴關系，並且很難通過Jest對其進行測試，因為它將需要遍歷所有項目。 當我在項目中使用別名作為文件路徑時，Jest如果找不到任何模塊，則會引發錯誤。 我知道可以將Webpack與Jest一起使用，但是代碼中的許多依賴類/函數不在React中，並且Webpack不維護其別名文件路徑。

import { getData } from 'service/common/getData';

class Wrapper extends baseClass {
    someVariable = false;
    payload = null;

    changeVariable() {
        this.someVariable = true;
    }

    async getData() {
        super.start();
        response = await fetchData();
        this.payload = response;
        super.end();
    }
}

這只是我實際代碼的一小部分。 我在遠程計算機上工作時，無法在此處發布整個課程。 基本上，我想測試是否在調用changeVariable時調用了它，以及是否在調用時成功地將someVariable更改為true ； 同樣，在網絡請求完成后檢查payload的值。 請注意， fetchData在其他文件中定義，但對於測試getData方法至關重要。 同樣，此處用於導入getData的路徑（ service/common/getData ）不是絕對路徑，而是Webpack中未定義的別名，而是其他位置。 因此，Jest無法解析getData 。 如果我模擬getData ，則不必擔心這一點，但是我將無法測試其功能。

Answer 1

@maverick完全可以使用jest測試類方法。 檢查鏈接中的代碼示例-

https://repl.it/repls/ClumsyCumbersomeAdware

index.js

class Wrapper {
  constructor(){
    this.someVariable = false;
  }
  changeVariable(){
    this.someVariable = true;
  }

  getData(){
    return new Promise(resolve => resolve('some data'));
  }
}


module.exports = Wrapper;

index.test.js

const Wrapper = require('./index');

const wrapper = new Wrapper();

describe('Wrapper tests', () => {
  it('should changeVariable', () => {
    wrapper.changeVariable();
    expect(wrapper.someVariable).toBe(true);
  });

  it('should get some data', () => {
    wrapper.getData().then( res => expect(res).toBe('some data'));
  });
});

這是一個非常簡單的示例，在現實生活中，異步調用要復雜得多，並且依賴於第三方庫或其他項目模塊。 在這種情況下，將所有依賴項注入類，然后分別進行模擬是有意義的。 例如 -

class GMapService {
  constructor(placesApi, directionApi){
      this.placesApi = placesApi;
      this.directionApi = directionApi;
  }

  getPlaceDetails(){
    this.placesApi.getDetails('NYC');
  }

  getDirections(){
    this.directionApi.getDirections('A', 'B');
  }
}

現在，您可以輕松模擬placeApi和directionApi，並單獨測試它們，而無需實際需要Google Map依賴項。

希望這可以幫助 ！ 😇