Test Test Diye Nice Nice: Mocklama (1) - Fonksiyon

Enes Başpınar /20 Eki 2022

21 min read •––– views

Bölümler

Test Test Diye Nice Nice: Mocklama (1) - Fonksiyon (Şu anda buradasınız)
Test Test Diye Nice Nice: Mocklama (2) - Modül
Test Test Diye Nice Nice: Mocklama (3) - Timer
Test Test Diye Nice Nice: Mocklama (4) - React

kaynak

Seriye isim verirken esinlendiğim, üstat Aşık Veysel'in muazzam türküsünü şuraya iliştirip başlayalım.

Günümüzde her bir uygulama akışlardan oluşur. E-ticaret uygulamaları özelinde bakarsak ürünleri inceleyebiliriz, önerileri keşfedebiliriz, ürün satın alabiliriz ve daha nice işlemler gerçekleştirebiliriz. Tüm bu akışların doğru işlediğinden emin olmak, yazılım geliştirme sürecinin önemli bir parçasıdır. Uygulamanın tüm senaryolar karşısında beklenen davranışı sergileyeceğinden emin olmak isteriz. Ancak test yazarken genelde işler yolunda gitmez.

Yazının kodlarına Github üzerinden erişebilirsiniz.

Mock Nedir ve Hangi Problemi Çözer?

Esasen, yazılımdaki herhangi bir şeyin taklidine mock diyebiliriz.

İndirimli ürünlerin fiyatının doğru gösterilmesi bir test senaryomuz olabilir. Testi yazdığımız esnada indirime sahip ürün bulup onunla ilerleyebilir ve testin geçmesinin mutluluğuyla merge request'i açabiliriz. Ancak bir gün pipeline çalıştığında test adımının tamamlanamadığına şahit oluruz. İndirim elbette ki sonsuza kadar sürmez ve süresi dolduğunda işler beklendiği gibi gitmez, test başarısız olur.

Diğer bir test senaryosu ise ürün satın alım akışının doğru çalışıp çalışmadığıdır. Bu senaryo daha karmaşıktır ve daha kritiktir. Ödeme yapılır, bankaya istek atılır, işlem gerçekleşir, sipariş iptal edilir ve paranın geri yatması beklenir. Ve bu süreç binlerce kez tekrarlanır. Ortaya büyük bir kaos çıkar.

kaynak

İşlemi gerçekleştiren kodu test etmeyi beklerken aynı zamanda Checkout API'sini ve hatta banka API'sini de test eder vaziyete geliriz. Testlerin odağını kaybetmemesi prensibi gereği API'den sahte bir cevap geldiğini varsaysaydık yalnızca kendi fonksiyonumuzu test edebilirdik. Arkamızda laf edecek sinirli bir satıcı ve bankacı güruhu da bırakmazdık.

kaynak

Buradan konumuza bağlamak gerekirse; verileri, foksiyonları ve bilimum yazılım araçlarının yerine konulmuş taklidine mock denir.

Mock Türleri

Test ile yeteri kadar uğraştıysanız mock yerine stub, fake, dummy gibi bir sürü kelime kullanıldığına denk gelmişsinizdir. Gerard Meszaros bir kitabında bu kargaşayı önlemek için gerçek nesnenin yerine konulacak sahte nesneleri Test Double yani test dublörü olarak ifade eder. Oyuncuların yerine geçen dublörler gibisine. Test dublörünü de altı alt kategoriye ayırır:

Dummy: Fonksiyona geçmemiz gereken parametreleri doldurmak için kullanılır ancak gerçekte bir işe yaramaz.
Fake: Kodun basitleştirilmiş ancak çalışan bir halini içerir. Buna verebileceğimiz örnek şifrelerin hashlerini almak için veritabanına gitmek yerine test verisi tutan bir nesneden okumaktır.
Stub: Test sırasındaki fonksiyon çağrılarında planlanmış yanıtlar döndürmek için kullanılır. İlk çağrıldığında A sonucunu ikincisinde B sonucunu diğerlerinde C sonucunu döndür diyebiliriz.
Spy: Fonksiyonların kaç kez ve hangi parametreler ile çağrıldığı, ve hangi cevapları döndüğü gibi ekstra bilgileri kaydeder.
Mock: Belirli argümanlarla çağrılmasını beklediğimiz fonksiyonların
döndüreceği sonuçları planlamak için kullanılır. Beklenmedik argümanlarla çağrıldığında ise hata fırlatır.

Pratikte bunlar iç içe girmiştir ve ayrım yapmakta zorlanırız. Bu sebeple mock diye genelliyor olacağız.

Girizgah

Fonksiyonları mocklama motivasyonumuz, orijinal lojiği manipüle ederek istediğimiz değerleri döndürmeye zorlamaktır. Bunların yanı sıra çağrılara ait detayların geçmişini tutar. Böylece fonksiyon çağırılma sayısını, kaç kere çağırıldığını ve hangi parametrelerle çağırıldığını test edebiliriz.

Jest'e geçmeden önce fonksiyon mocklama işlemini kod üzerinde görselleştirelim. Ürünün bilgisini çeken ve manipüle eden yardımcı fonksiyonlarımız olduğunu varsayalım.

productApi.js

import axios from "axios";
async function getProduct(productId) {
  const response = await axios.get(`https://dummyjson.com/products/${productId}`);
  return response.data;
}
function mapProduct(data) {
  const mappedData = { ...data };
  mappedData.hotDeal = data.discountPercentage > 80;
  mappedData.isRunningOut = data.stock < 5;
  return mappedData;
}
export { getProduct, mapProduct };

Bu kodlar üzerinde test etmek istediğimiz senaryo ise indirim yüzdesinin %80 üzerinde olması halinde "Sıcak Teklif" olarak tanımlanması olsun. discountPercentage değerinin istediğimiz gibi olacak şekilde sahte bir ürün dönmesini isteriz. O zaman manipülasyon zamanı!

productTest.js

import axios from "axios";
import { getProduct, mapProduct } from "./productApi.js";
axios.get = async () => {
  return {
    data: {
      id: 999,
      title: "Fake iPhone 11",
      description: "An apple mobile which is nothing like apple",
      price: 549,
      discountPercentage: 99.99,
      rating: 4.69,
      stock: 94,
      brand: "Apple",
      category: "smartphones",
      thumbnail: "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
      images: ["https://dummyjson.com/image/i/products/1/1.jpg"],
    },
  };
};
async function test() {
  const product = await getProduct(3);
  const mappedProduct = mapProduct(product);
  if (!mappedProduct.hotDeal) {
    throw new Error("mapProduct method works incorrectly. take a look at the code.");
  } else {
    console.log("mapProduct method works correctly.");
  }
}
test();

Kodu manuel olarak istediğimiz yönde şekillendiririz. Diğer bir ifadeyle ünlü Türk kimyager Abuzer Kömürcü'nün de dediği gibi ezeriz.

Böylece gelen ürünün istediğimiz bilgileri içermediği ve API'ye erişilemediği durumlar karşısında testimiz kırılgan hale gelmemiş olur. Aynı zamanda API'nin cevap süresiyle de test süremizi uzatmayız. Mocklamanın arkasındaki temel mantık budur.

Mock Fonksiyonu

Artık Jest ile devam edebiliriz. Mock fonksiyonu oluşturmak için jest.fn(implementation?) metodu kullanılır.

mockFunction.test.js

test("playground", () => {
  const mockFunction = jest.fn();
  console.log("mockFunction:", mockFunction)
});

=== Output:mockFunction: [Function: mockConstructor] {
  _isMockFunction: true,
  getMockImplementation: [Function (anonymous)],
  mock: [Getter/Setter],
  mockClear: [Function (anonymous)],
  mockReset: [Function (anonymous)],
  mockRestore: [Function (anonymous)],
  mockReturnValueOnce: [Function (anonymous)],
  mockResolvedValueOnce: [Function (anonymous)],
  mockRejectedValueOnce: [Function (anonymous)],
  mockReturnValue: [Function (anonymous)],
  mockResolvedValue: [Function (anonymous)],
  mockRejectedValue: [Function (anonymous)],
  mockImplementationOnce: [Function (anonymous)],
  withImplementation: [Function: bound withImplementation],
  mockImplementation: [Function (anonymous)],
  mockReturnThis: [Function (anonymous)],
  mockName: [Function (anonymous)],
  getMockName: [Function (anonymous)]
}

Mocklamak istediğimiz metodları bu mock fonksiyon ile ezeriz.

overridePackageMethod.test.js

import axios from "axios";
test("playground", () => {
  axios.get = jest.fn();
  console.log("mock Implementation:", axios.get.toString());
});

=== Output:mock Implementation: function () {
  return fn.apply(this, arguments);
}

Ayrıca yerleşik nesnelerin yöntemlerini de mocklayabiliriz.

builtInMethod.test.js

test("playground", () => {
  console.log("original Implementation:", Math.random.toString());
  Math.random = jest.fn();
  console.log("mock Implementation:", Math.random.toString());
});

=== Output:original Implementation: function random() { [native code] }
mock Implementation: function () {
  return fn.apply(this, arguments);
}

Peki mock fonksiyonun büyüsü nedir?

.mock Niteliği

Mock fonksiyonları, testlerde işimizi kolaylaştıracak bilgileri kaydederler. Bunlara mock özelliği ile erişebiliriz. Niteliklerine bakacak olursak:

mock.calls - Fonksiyonun çağrıldığı argümanları listeler.
mock.results - Fonksiyon çağrılarının sonucunu listeler. Dönüş türü, return, throw ya da incomplete olabilir.
mock.instances - Fonksiyon constructor ise üretilen nesneleri listeler.
mock.contexts - Fonksiyon çağrıldığı andaki this nesnelerini listeler.
mock.lastCall - Fonksiyonun son çağırıldığı argümanları listeler.

manipulateArray.test.js

function manipulateArray(array, manipulateMethod) {
  return array.map((item) => manipulateMethod(item));
}
test("playground", () => {
  const array = [0, 1, 2]
  const mockManipulateMethod = jest.fn((x) => x + 2);
  manipulateArray(array, mockManipulateMethod);
  console.log("mock property:", mockManipulateMethod.mock);
});

=== Output:mockManipulateMethod's mock property: {
  "calls": [[0], [1], [2]],
  "contexts": [null, null, null],
  "instances": [null, null, null],
  "results": [
    { "type": "return", "value": 2 },
    { "type": "return", "value": 3 },
    { "type": "return", "value": 4 },
  ],
  "lastCall": [2]
}

Makalenin devamında bu özelliği aktif olarak kullanacağız.

Statik Değer Döndürme

Mock metodlarının senaryoya uygun değerler üretmesi beklenir. Buna yönelik statik değerler döndürmek için iki metoda sahibiz:

mockReturnValue(value) - Tüm çağrılarda döndürülecek değeri belirler.
mockReturnValueOnce(value) - Tek seferliğine döndürülecek değeri belirler.

mockReturns.test.js

test("playground", () => {
  const mockFunction = jest
    .fn()
    .mockReturnValue("other calls")
    .mockReturnValueOnce("first call")
    .mockReturnValueOnce("second call");
  for (let index = 0; index < 5; index++) {
    console.log("mockedProduct", mockFunction());
  }
});

=== Output:

mockedProduct first call mockedProduct second call mockedProduct other calls mockedProduct other calls mockedProduct other calls

İki örneğe bakalım.

İlk örnekte localStorage'den okuduğu değeri döndüren bir fonksiyonumuz olduğunu düşünelim. Verdiğimizde anahtara göre hafızadan okuduğu değeri döndürüp döndürmeyeceğini test etmek için window.localStorage.getItem metodunu mocklayalım.

getFromLocalStorage.test.js

function getFromLocalStorage(key) {
  return window.localStorage.getItem(key);
}
test("should get data from local storage correctly", () => {
  const key = "testKey";
  const value = "testValue";
  // mock fonksiyonunu oluşturalım.
  const mockLocalStorageGet = jest.fn();
  // window.localStorage.getItem'a mock fonksiyonu atayalım.
  // böylece test etmek için istediğimiz değeri döndürebiliriz.
  Object.defineProperty(window, "localStorage", {
    value: {
      getItem: mockLocalStorageGet,
    },
  });
  // window.localStorage.getItem çağrıldığında "testValue"
  // döndürmesini isteriz. bunun için mock fonksiyonunu da
  // mocklanan fonksiyonu da kullanabiliriz. 
  mockLocalStorageGet.mockReturnValue(value);
  // ya da: window.localStorage.getItem.mockReturnValue(value);
  
  // test edeceğimiz fonksiyonu çağıralım.
  getFromLocalStorage(key);
  // fonksiyonun mocklanıp mocklanmadığına kontrol edelim.
  expect(jest.isMockFunction(window.localStorage.getItem)).toBe(true)
  // fonksiyonun "testKey" ile çağırıldığını kontrol edelim.
  expect(mockLocalStorageGet.mock.lastCall[0]).toBe(key);
  // fonksiyonun belirlediğimiz değeri döndürdüğünü kontrol edelim.
  expect(mockLocalStorageGet.mock.results[0].value).toBe(value);
});

İkinci örnekte ise gelecekteki bir tarihe kalan süreyi hesaplamak istiyoruz. Eğer mocklamazsak o anki tarihi baz alır. Zamanın akışına kapılıp bitiş tarihi geçtiğimizde test patlamaya başlayacaktır. İşte bu sebeple new Date()'i mocklayıp döndürdüğü tarihin bitiş tarihinden önce olduğundan emin olmalıyız.

getRemainingTime.test.js

function getRemainingTime(endDate, startDate = new Date()) {
  let delta = (endDate - startDate) / 1000;
  return {
    remainingDays: Math.floor(delta / (60 * 60 * 24)),
    remainingHours: Math.floor((delta / (60 * 60)) % 24),
    remainingMinutes: Math.floor((delta / 60) % 60),
    remainingSeconds: Math.floor(delta % 60),
  };
}
test("should return remaining data when give future date", () => {
  const endDate = new Date(2023, 1, 1);
  // new Date() ile döndürülecek değeri belirleyelim'.
  const mockCurrDate = new Date(2022, 10, 16, 16, 9, 25);
  // Date constructor'ından oluşacak nesnenin mockCurrDate
  // olmasını sağlayalım.
  global.Date = jest.fn().mockReturnValue(mockCurrDate);
  expect(getRemainingTime(endDate)).toEqual({
    remainingDays: 76,
    remainingHours: 7,
    remainingMinutes: 50,
    remainingSeconds: 35,
  });
});

Birim testlerin mantığı gereği test etmek istenen fonksiyonda kullanılan harici fonksiyonlar (yerleşik ya da import edilmiş olması farketmeksizin) mocklanmalıdır.

Dinamik Değer Döndürme

Argümanlara göre dinamik değer döndürmek istenebilir. Bunun için mock fonksiyona implementasyon tanımlamak için üç metoda sahibiz:

mockImplementation(func) - Tüm çağrılışlarında kullanılacak implementasyonu belirler.
mockImplementationOnce(func) - Tek seferliğine kullanılacak implementasyonu belirler.
withImplementation(func, callback) - Verilen callback fonksiyonun scope'u içerisinde çağırıldığında döneceği değeri belirler.

İki örneğe bakalım.

İlk örnekte verilen fonksiyonu dizinin elemanlarına uygulayan bir fonksiyonun implementasyonunu değiştirelim.

manipulateArray.test.js

function manipulateArray(array, manipulateMethod) {
  return array.map((item) => manipulateMethod(item));
}
test("playground", () => {
  const array = [0, 1, 2];
  const manipulateMethod = jest.fn().mockImplementation(x => x + 2);
  manipulateArray(array, manipulateMethod);
  console.log(manipulateMethod.mock.results);
});

=== Output:[
  { type: 'return', value: 2 },
  { type: 'return', value: 3 },
  { type: 'return', value: 4 }
]

İkinci örnekte ise belirli blok içerisinde implementasyonu nasıl değiştirebileceğimizi görelim.

withImplementation.test.js

test("playground", () => {
  const mockMethod = jest.fn(() => 'outside callback');
  console.log(mockMethod());
  mockMethod.withImplementation(
    // mockMethod implementasyonu belirtir.
    () => 'inside callback', 
    // implementasyon sadece bu fonksiyon kapsamında geçerli olur.
    () => {
      console.log(mockMethod());
    },
  );
  console.log(mockMethod());
});

=== Output:outside callback
inside callback
outside callback

Buraya kadarki kısmın anlaşılması önemliydi. Serinin geri kalanı genelde impelementasyonun ve dönüş değerinin mocklanması etrafında dönecek.

Asenkron Fonksiyonları Mocklama

Asenkron fonksiyonlar bildiğimiz gibi Promise döndürürler. Dolayısıyla mock fonksiyonumuzun da Promise döndürmesini bekleriz. Cebimizdeki mockImplementation() metoduyla bunu jest.fn().mockImplementation(() => Promise.resolve(value)); ya da jest.fn().mockImplementation(() => Promise.reject(value)); olacak şekilde yapabiliriz. Ancak Jest bu implementasyonları abstract eden dört metod sağlar:

mockResolvedValue(value) - Tüm çağrılarda resolve edilmiş sonuç döndürür.
mockResolvedValueOnce(value) - Tek seferliğine resolve edilmiş sonuç döndürür.
mockRejectedValue(value) - Tüm çağrılarda reject edilmiş sonuç döndürür.
mockRejectedValueOnce(value) - Tek seferliğine reject edilmiş sonuç döndürür.

Ürün bilgilerini API'den çeken bir metodun doğru veri döndürdüğünü ve işlem sırasında hata aldığında ise null döndürdüğünü test edelim.

getProduct.test.js

import axios from "axios";
async function getProduct(productId) {
  try {
    const response = await axios.get(`https://dummyjson.com/products/${productId}`);
    return response.data;
  } catch (error) {
    return null;
  }
}
describe("getProduct tests", () => {
  beforeEach(() => {
    axios.get = jest.fn();
  });
  test("should be return product data when request is succesfully", async () => {
    const mockedValue = {
      data: {
        id: 1,
        title: "iPhone 9",
        description: "An apple mobile which is nothing like apple",
        price: 549,
        discountPercentage: 12.96,
        rating: 4.69,
        stock: 94,
        brand: "Apple",
        category: "smartphones",
        thumbnail: "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
        images: [
          "https://dummyjson.com/image/i/products/1/1.jpg",
          "https://dummyjson.com/image/i/products/1/2.jpg",
          "https://dummyjson.com/image/i/products/1/3.jpg",
          "https://dummyjson.com/image/i/products/1/4.jpg",
          "https://dummyjson.com/image/i/products/1/thumbnail.jpg",
        ],
      },
    };
    axios.get.mockResolvedValue(mockedValue);
    const result = await getProduct();
    expect(result).toStrictEqual(mockedValue.data);
  });
  test("should be return product data when request is failed", async () => {
    axios.get.mockRejectedValue(new Error("Error occured when fetching data!"));
    const result = await getProduct();
    expect(result).toStrictEqual(null);
  });
});

=== Output:PASS  src/tests/getProduct.test.js
  getProduct tests
    ✓ should be return product data when request is succesfully (20 ms)
    ✓ should be return product data when request is failed (1 ms)

Mock Verilerini Temizleme

Bazı zamanlar fonksiyonlarımız birden fazla senaryoya sahip olabilir. Jest mock fonksiyonlarının verilerini kendiliğinden temizlemez. Dolayısıyla beklenmedik durumlara denk gelebiliriz.

afterEachless.test.js

describe("playground", () => {
  test("test 1", () => {
    Math.random = jest.fn().mockReturnValue(55);
    console.log("first random value: ", Math.random());
    console.log("second random value: ", Math.random());
    console.log(Math.random.mock.calls.length);
  });
  test("test 2", () => {
    console.log("third random value: ", Math.random());
    console.log("fourth random value: ", Math.random());
    console.log(Math.random.mock.calls.length);
  });
});

=== Output:first random value:  55
second random value:  55
2
third random value:  55
fourth random value:  55
4

Testin içerisinde yaptığımız mock işleminin diğerini de etkilediğini görebiliriz. Çünkü direkt olarak import edilen nesneyi değiştirmiş olduk. Halbuki geçmişin test bazlı tutulmasını isteriz. Bunun için üç farklı metoda sahibiz:

mockClear() - .mock özelliğindeki verileri temizler.
mockReset() - mockClear() metoduna ek olarak mockReturnValue ve mockImplementation türevi fonksiyonların etkilerini temizler.
mockRestore() - mockReset() metoduna ek olarak mock, Spy ile oluşturulduysa, orjinal implementasyonu geri yükler.

Tüm mock fonksiyonların verilerini temizlemek için jest.clearAllMocks(), jest.resetAllMocks() ve jest.restoreAllMocks() kullanılabilir. Ayrıca her test dosyasına ayrı ayrı yazmamak adına jest.config.js dosyasında clearMocks, resetMocks ve restoreMocks kuralları etkinleştirilebilir.

Bu metodların afterEach ile kullanılması güzel bir pratiktir. Böylece her testten sonra temizlik yapıldığından emin oluruz. Testi güncelleyelim.

afterEach.test.js

describe("playground", () => {
  afterEach(() => {
    Math.random.mockRestore();
  });
  test("test 1", () => {
    Math.random = jest.fn().mockReturnValue(55);
    console.log("first random value:", Math.random());
    console.log("second random value:", Math.random());
    console.log(Math.random.mock.calls.length);
  });
  test("test 2", () => {
    console.log("third random value:", Math.random());
    console.log("fourth random value:", Math.random());
    console.log(Math.random.mock.calls.length);
  });
});

=== Output:

first random value: 55 second random value: 55 2 third random value: undefined fourth random value: undefined 2

Değerlerin undefined dönmesi mocklanan metodun implementasyonunun olmadığını ve varsayılan implemantasyon olan () => undefined fonksiyonunu kullandığını gösterir. Görünüşe göre mockRestore işe yaramadı. Peki neden?

Spy

Metodları ezerek mocklarsak orijinal implementasyona erişimi kaybederiz. Bu problemi çözmek için jest.spyOn(object, methodName) kullanılır.

Varsayılan olarak fonksiyonun orijinal implementasyonuna dokunulmaz ancak jest.fn() gibi çağrıları takip edebilmemizi sağlar. Döndürülen değer aynı zamanda mock fonksiyonudur ve şu ana kadarki tüm yöntemleri kullanabileceğimizi gösterir.

dateNow.test.js

test("playground", () => {
  const dateNowSpy = jest.spyOn(Date, "now");
  // orijinal implementasyonu kullanır.
  console.log("mocked function:", Date.now);
  console.log("first call return value:", Date.now());
  dateNowSpy.mockReturnValueOnce(500);
  // mock değeri döndürür.
  console.log("second call return value:", Date.now());
  // orijinal implementasyonu hala kaybetmez ve kullanır.
  console.log("third call return value:", Date.now());
});

=== Output:mocked function: [Function: mockConstructor] {
  _isMockFunction: true,
  getMockImplementation: [Function (anonymous)],
  mock: [Getter/Setter],
  mockClear: [Function (anonymous)],
  mockReset: [Function (anonymous)],
  mockRestore: [Function (anonymous)],
  mockReturnValueOnce: [Function (anonymous)],
  mockResolvedValueOnce: [Function (anonymous)],
  mockRejectedValueOnce: [Function (anonymous)],
  mockReturnValue: [Function (anonymous)],
  mockResolvedValue: [Function (anonymous)],
  mockRejectedValue: [Function (anonymous)],
  mockImplementationOnce: [Function (anonymous)],
  withImplementation: [Function: bound withImplementation],
  mockImplementation: [Function (anonymous)],
  mockReturnThis: [Function (anonymous)],
  mockName: [Function (anonymous)],
  getMockName: [Function (anonymous)]
}
first call return value: 1671971862021
second call return value: 500
third call return value: 1671971862027

İmplementasyonu ezmek istersek kullanmamız gereken metodları halihazırda biliyoruz.

dateNowImplementation.test.js

test("playground", () => {
  jest.spyOn(global.Date, "now");
  console.log("first call return value: ", Date.now());
  
  global.Date.now.mockImplementation(() => "Hacked!");
  console.log("second call return value: ", Date.now());
  console.log("third call return value: ", Date.now()); 
  
  global.Date.now.mockRestore();
  console.log("fourth call return value: ", Date.now());
});

=== Output:first call return value:  1671972138129
second call return value:  Hacked!
third call return value:  Hacked!
fourth call return value:  1671972138151

Hangisini kullanacağınız konusunda kafanız karıştıysa özet geçelim. Eğer bir fonksiyonun sadece kaç kez ve hangi parametrelerle çağrıldığını izlemek istiyorsak ve bunları yaparken de lojiğini bozmak istemiyorsak jest.fn() yerine jest.spyOn() kullanabiliriz. Aksi durumda hangisini seviyorsak onunla yardırabiliriz.

TypeScript Type Desteği

Typescript projelerinde mock fonksiyonların özel niteliklerine erişirken tip hatasıyla karşılaşırız. Örnekteki kodda mock isimli bir özelliğinin olmadığına dair bir hata alırız.

test("playground", () => {
  const mockLocalStorageGet = jest.fn();
  Object.defineProperty(window, "localStorage", {
    value: {
      getItem: mockLocalStorageGet,
    },
  });
  console.log(window.localStorage.getItem.mock.results);
});

Problemi çözmek için jest.Mock ya da jest.mocked() kullanabilirsiniz.

jest.mocked verdiğiniz nesnenin içerisindeki tüm mock fonksiyonlara gerekli tipleri ekler.

// kullanım 1 (favorim):
const mockedLocalStorageGetItem = jest.mocked(window.localStorage.getItem)
// kullanım 2:
const mockedLocalStorageGetItem = window.localStorage.getItem as jest.Mock;

Özel Expect Metodları

.mock özelliğini testlerimizde direkt kullanmayız. Bu özelliği kullanmak üzere Jest'in yardımcı metodlarını kullanırız.

.toHaveBeenCalled() - En az bir kez çağrılıp çağrılmadığını kontrol eder.
.toHaveBeenCalledTimes(n) - N kez çağırılıp çağırılmadığını kontrol eder.
.toHaveBeenCalledWith(...args) - Spesifik argümanlarla en az bir kez çağırılıp çağrılmadığını kontrol eder.
.toHaveBeenLastCalledWith(...args) - Sonuncu çağrılışında spesifik argümanlarla çağırılıp çağrılmadığını kontrol eder.
.toHaveBeenNthCalledWith(nthCall, ...args) - N. çağrılışında spesifik argümanlarla çağırılıp çağrılmadığını kontrol eder.
.toHaveReturned() - En az bir kez başarılı (error fırlatmıyorsa) değer döndürüp döndürmediğini kontrol eder.
.toHaveReturnedTimes(number) - N kez başarılı değer döndürüp döndürmediğini kontrol eder.
.toHaveReturnedWith(value) - En az bir kez verdiğimiz değeri döndürüp döndürmediğini kontrol eder.
.toHaveLastReturnedWith(value) - Sonuncu çağrılışında verdiğimiz değeri döndürüp döndürmediğini kontrol eder.
.toHaveNthReturnedWith(nthCall, value) - N. çağrılışında verdiğimiz değeri döndürüp döndürmediğini kontrol eder.

test("playground", async () => {
  const mockAreaCalculate = jest.fn((x, y) => x * y);
  mockAreaCalculate(7, 13);
  mockAreaCalculate(3, 5);
  mockAreaCalculate(5, 8);
  expect(mockAreaCalculate).toHaveBeenCalled();
  expect(mockAreaCalculate).toHaveBeenCalledTimes(3);
  expect(mockAreaCalculate).toHaveBeenCalledWith(7, 13);
  expect(mockAreaCalculate).toHaveBeenLastCalledWith(5, 8);
  expect(mockAreaCalculate).toHaveBeenNthCalledWith(2, 3, 5);
  expect(mockAreaCalculate).toHaveReturned();
  expect(mockAreaCalculate).toHaveReturnedTimes(3);
  expect(mockAreaCalculate).toHaveReturnedWith(7 * 13);
  expect(mockAreaCalculate).toHaveLastReturnedWith(5 * 8);
  expect(mockAreaCalculate).toHaveNthReturnedWith(2, 3 * 5);
});

=== Output:PASS  playground.test.ts
✓ playground

Çağrıldığı argümanları ya da döndürdüğü değerleri kısmi olarak test etmek istersek expect özellikleri kullanabiliriz.

expect.anything() - Null ve undefined dışında her tür değerle eşleşir.
expect.any(constructor) - İlgili constructor ile oluşturulmuş değerlerle eşleşir. eşleşir.
expect.stringContaining(string) - Verilen string'i içeriyorsa eşleşir.
expect.stringMatching(string | regexp) - Verilen string ya da regex ile eşleşiyorsa eşleşir.
expect.arrayContaining(array) - Dizi verilen alt kümeyi içeriyorsa eşleşir.
expect.objectContaining(object) - Obje verilen alt objeyi içeriyorsa eşleşir.
expect.not.stringContaining(string) - String değilse ya da verilen string'i içermiyorsa eşleşir.
expect.not.stringMatching(string | regexp) - String değilse ya da verilen string ve regex ile eşleşmiyorsa eşleşir.
expect.not.arrayContaining(array) - Dizi verilen alt kümeyi içermiyorsa eşleşir.
expect.not.objectContaining(object) - Obje verilen alt objeyi içermiyorsa eşleşir.

test("playground", async () => {
  const calledArguments = [
    [1, 2, 3],
    { 
      name: "Enes",
      surname: "Başpınar",
      job: "Software Developer",
      age: 23
    },
  ];
  expect(calledArguments).toEqual([
    expect.arrayContaining([1, 3]),
    expect.objectContaining({
      name: expect.anything(),
      age: expect.any(Number),
      job: expect.stringContaining("Developer"),
    }),
  ]);
});

=== Output:PASS  playground.test.ts
✓ playground

Kapanış

Test yazmak ve özellikle fonksiyon mocklamak bu alana yeni başlayan insanları zorlayabiliyor. Bu sebeple yeni bir seri başlatmak istedim. Geri bildirimlerinizi bekliyorum. Bitirirken de konuya dair yaptığım bir caps'i paylaşmak istiyorum.

kaynak

Yazı burada biter. Sağlıcakla kalın.

Test Test Diye Nice Nice: Mocklama (1) - Fonksiyon

Bölümler

İçerik

Mock Nedir ve Hangi Problemi Çözer?

Mock Türleri

Girizgah

Mock Fonksiyonu

.mock Niteliği

Statik Değer Döndürme

Dinamik Değer Döndürme

Asenkron Fonksiyonları Mocklama

Mock Verilerini Temizleme

Spy

TypeScript Type Desteği

Özel Expect Metodları

Kapanış

Kaynaklar