Jak mockować obiekt okna JavaScript za pomocą Jest?

112

Muszę przetestować funkcję, która otwiera nową kartę w przeglądarce

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

Chciałbym sfałszować funkcję okna, openaby sprawdzić, czy do openfunkcji jest przekazywany poprawny adres URL .

Używając Jest, nie wiem, jak kpić z window. Próbowałem ustawić window.openza pomocą funkcji pozorowanej, ale ten sposób nie działa. Poniżej znajduje się przypadek testowy

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

ale daje mi błąd

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

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

Co powinienem zrobić z przypadkiem testowym? Wszelkie sugestie i wskazówki są mile widziane.

Danny
źródło

Odpowiedzi:

91

Zamiast windowużywaćglobal

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

możesz też spróbować

const open = jest.fn()
Object.defineProperty(window, 'open', open);
Andreas Köberle
źródło
3
Próbowałem tego, ale nie działa dla mnie. Mój przypadek jest dziwny, kpiny działa lokalnie, ale nie w przypadku scalania PR w Travisie ... Masz jakiś pomysł?
Alex JM
@AlexJM masz ten sam problem? masz ochotę się podzielić, jak kpisz z obiektu okna?
Danny
1
Po prostu definiuję window.property w moich testach
maracuja-juice
@ Andreas czy istnieje sposób, aby kpić z okna jako undefined stackoverflow.com/questions/59173156/ ...
DILEEP THOMAS
Dzięki! Po godzinach, po prostu potrzebne do zmiany windownaglobal
SrAxi
70

Metoda, która zadziałała w moim przypadku, była następująca. Takie podejście pozwoliło mi do testowania kodu, który powinien pracować zarówno w przeglądarce, a w węźle, ponieważ pozwoliło mi ustawić windowsię undefined.

Tak było z Jest 24.8 (wierzę):

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();
});
tvsbrent
źródło
1
To znacznie lepsze niż, Object.definePropertyponieważ pozwala to nie wpływać na inne testy podczas kpiny.
Sergey
Powinna to być akceptowana odpowiedź, ponieważ kpi / szpieguje zamiast zmieniać rzeczywistą właściwość globalną
user2490003
10

Możemy to również zdefiniować za pomocą globalwsetupTests

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

I nazwij to używając globalw rzeczywistym teście:

// yourtest.test.js
it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(global.open).toBeCalled();
});
Poh Zi How
źródło
7

Istnieje kilka sposobów na udawanie globali w Jest:

  1. Użyj mockImplementationpodejścia (większość jest jak sposób), ale zadziała tylko dla tych zmiennych, które mają pewną domyślną implementację dostarczoną przez jsdom, window.openjest jedną z nich:
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();
});
  1. Przypisz wartość bezpośrednio do właściwości globalnej, najprostszy sposób, ale może wywołać komunikaty o błędach dla niektórych windowzmiennych, np 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;
});
  1. Nie używaj globali bezpośrednio (wymaga trochę refaktoryzacji)

Zamiast używać wartości globalnej bezpośrednio, może być czystsze importowanie jej z innego pliku, więc mockowanie stanie się trywialne w przypadku Jest.

./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}`);
  }
}
jmarceli
źródło
7

Znalazłem na to łatwy sposób: usuń i zamień

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
  });
});
Jee Mok
źródło
7

W moim komponencie, do którego potrzebuję dostępu window.location.search, oto co zrobiłem w żartobliwym teście:

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

W przypadku, gdy właściwości okna muszą być różne w różnych testach, możemy umieścić mockowanie okna w funkcji i uczynić ją zapisywalną w celu nadpisania dla różnych testów:

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

I resetuj po każdym teście

afterEach(() => {
  delete global.window.location;
});
Alonad
źródło
5

Możesz spróbować tego:

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();
});
abhishek khandait
źródło
4

Jeśli jest podobny do problemu z lokalizacją okna na https://github.com/facebook/jest/issues/890 , możesz spróbować [dostosowany]

delete global.window.open;
global.window = Object.create(window);
global.window.open = jest.fn();
serv-inc
źródło
4

Przypisuję bezpośrednio jest.fn()do window.open.

window.open = jest.fn()
// ...code
expect(window.open).toHaveBeenCalledTimes(1)
expect(window.open).toHaveBeenCalledWith('/new-tab','__blank')
Sagar
źródło