Jest kullanarak JavaScript pencere nesnesiyle nasıl dalga geçilir?

Tarayıcıda yeni bir sekme açan bir işlevi test etmem gerekiyor

openStatementsReport(contactIds) {
  window.open(`a_url_${contactIds}`);
}

İşleve opendoğru URL'nin iletildiğini doğrulayabilmek için pencerenin işleviyle dalga geçmek istiyorum open.

Jest'i kullanarak nasıl alay edeceğimi bilmiyorum window. window.openSahte bir işlevle ayarlamayı denedim ama bu yol çalışmıyor. Aşağıda test durumu var

it('correct url is called', () => {
  window.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(window.open).toBeCalled();
});

ama bana hata veriyor

expect(jest.fn())[.not].toBeCalled()

jest.fn() value must be a mock function or spy.
    Received:
      function: [Function anonymous]

Test senaryosuna ne yapmalıyım? Herhangi bir öneri veya ipucu takdir edilmektedir.

Yerine windowkullanımıglobal

it('correct url is called', () => {
  global.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(global.open).toBeCalled();
});

ayrıca deneyebilirsin

const open = jest.fn()
Object.defineProperty(window, 'open', open);

Benim için işe yarayan bir yöntem şuydu. Bu yaklaşım, ayarlamama izin verdiği için hem tarayıcıda hem de Düğümde çalışması gereken bazı kodları test etmeme izin windowverdi undefined.

Bu Jest 24.8 ile oldu (inanıyorum):

let windowSpy;

beforeEach(() => {
  windowSpy = jest.spyOn(window, "window", "get");
});

afterEach(() => {
  windowSpy.mockRestore();
});

it('should return https://example.com', () => {
  windowSpy.mockImplementation(() => ({
    location: {
      origin: "https://example.com"
    }
  }));

  expect(window.location.origin).toEqual("https://example.com");
});

it('should be undefined.', () => {
  windowSpy.mockImplementation(() => undefined);

  expect(window).toBeUndefined();
});

Biz de kullanarak tanımlayabilirsiniz globaliçindesetupTests

// setupTests.js
global.open = jest.fn()

Ve bunu globalgerçek testte kullanarak arayın :

// yourtest.test.js
it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(global.open).toBeCalled();
});

Jest'te küresellerle dalga geçmenin birkaç yolu vardır:

1. Kullanım mockImplementationyaklaşımı (yol gibi çoğu Jest), ancak sağladığı bazı varsayılan uygulaması vardır bu değişkenler için sadece çalışacak jsdom, window.openbunlardan biri:

test('it works', () => {
  // setup
  const mockedOpen = jest.fn();
  // without making a copy you will have a circular dependency problem
  const originalWindow = { ...window };
  const windowSpy = jest.spyOn(global, "window", "get");
  windowSpy.mockImplementation(() => ({
    ...originalWindow, // in case you need other window properties to be in place
    open: mockedOpen
  }));

  // tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // cleanup
  windowSpy.mockRestore();
});

2. Değeri doğrudan global özelliğe atayın, en doğrusu, ancak bazı windowdeğişkenler için hata mesajlarını tetikleyebilir, örn window.href.

test('it works', () => {
  // setup
  const mockedOpen = jest.fn();
  const originalOpen = window.open;
  window.open = mockedOpen;

  // tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // cleanup
  window.open = originalOpen;
});

3. Küreselleri doğrudan kullanmayın (biraz yeniden düzenleme gerektirir)

Global değeri doğrudan kullanmak yerine, onu başka bir dosyadan içe aktarmak daha temiz olabilir, bu nedenle Jest ile alay etmek önemsiz hale gelecektir.

./test.js

jest.mock('./fileWithGlobalValueExported.js');
import { windowOpen } from './fileWithGlobalValueExported.js';
import { statementService } from './testedFile.js';

// tests
test('it works', () => {
  statementService.openStatementsReport(111)
  expect(windowOpen).toBeCalled();
});

./fileWithGlobalValueExported.js

export const windowOpen = window.open;

./testedFile.js

import { windowOpen } from './fileWithGlobalValueExported.js';
export const statementService = {
  openStatementsReport(contactIds) {
    windowOpen(`a_url_${contactIds}`);
  }
}

Bunu deneyebilirsiniz:

import * as _Window from "jsdom/lib/jsdom/browser/Window";

window.open = jest.fn().mockImplementationOnce(() => {
    return new _Window({ parsingMode: "html" });
});

it("correct url is called", () => {
    statementService.openStatementsReport(111);
    expect(window.open).toHaveBeenCalled();
});

Bunu yapmanın kolay bir yolunu buldum: sil ve değiştir

describe('Test case', () => {
  const { open } = window;

  beforeAll(() => {
    // Delete the existing
    delete window.open;
    // Replace with the custom value
    window.open = jest.fn();
    // Works for `location` too, eg:
    // window.location = { origin: 'http://localhost:3100' };
  });

  afterAll(() => {
    // Restore original
    window.open = open;
  });

  it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(window.open).toBeCalled(); // Happy happy, joy joy
  });
});

Https://github.com/facebook/jest/issues/890 adresindeki pencere konumu sorununa benziyorsa , [ayarlanmış] deneyebilirsiniz

delete global.window.open;
global.window = Object.create(window);
global.window.open = jest.fn();

Bileşenimde erişmem gerekiyor window.location.search, jest testinde yaptığım şuydu:

Object.defineProperty(global, "window", {
  value: {
    location: {
      search: "test"
    }
  }
});

Pencere özelliklerinin farklı testlerde farklı olması gerektiğinde, pencere alayını bir işleve yerleştirebilir ve farklı testler için geçersiz kılmak için yazılabilir hale getirebiliriz:

function mockWindow(search, pathname) {
  Object.defineProperty(global, "window", {
    value: {
      location: {
        search,
        pathname
      }
    },
    writable: true
  });
}

Ve her testten sonra sıfırlayın

afterEach(() => {
  delete global.window.location;
});

Ben doğrudan tahsis edeceğim jest.fn()için window.open.

window.open = jest.fn()
// ...code
expect(window.open).toHaveBeenCalledTimes(1)
expect(window.open).toHaveBeenCalledWith('/new-tab','__blank')

Jest yapılandırmanıza setupFilesAfterEnv: ["./setupTests.js"] ekleyin, bu dosyayı oluşturun ve testlerden önce çalıştırmak istediğiniz kodu ekleyin

//setupTests.js
window.crypto = {
   .....
};

Referans: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array