web-dev-qa-db-ja.com

Jestを使用してJavaScriptウィンドウオブジェクトをモックする方法は？

ブラウザで新しいタブを開く機能をテストする必要があります

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

正しいURLがopen関数に渡されることを確認できるように、ウィンドウのopen関数をモックしたいと思います。

Jestを使用して、ウィンドウをモックする方法がわかりません。モック関数でwindow.openを設定しようとしましたが、この方法は機能しません。以下はテストケースです

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

しかし、それは私にエラーを与えます

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

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

テストケースに対して何をすべきですか？提案やヒントは大歓迎です

javascriptmockingjestjs
46
danny

windowの代わりにglobalを使用します

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

あなたも試すことができます

const open = jest.fn()
Object.defineProperty(window, 'open', open);
42
Andreas Köberle

globalのsetupTestsを使用して定義することもできます

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

そして、実際のテストでglobalを使用して呼び出します。

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

私のために働いた方法は次のとおりでした。このアプローチにより、windowをundefinedに設定できるため、ブラウザーとNodeの両方で機能するコードをテストできました。

これはJest 24.8でした（私は信じています）：

let windowSpy;

beforeEach(() => {
  windowSpy = jest.spyOn(global, '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();
});
4
tvsbrent

これを試すことができます：

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();
});
3
abhishek khandait

Jest configにsetupFilesAfterEnv：["./setupTests.js"]を追加し、そのファイルを作成して、テストの前に実行するコードを追加します

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

参照： https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

1
stefan

https://github.com/facebook/jest/issues/89 のウィンドウの場所の問題に似ている場合は、[調整済み]を試すことができます。

delete global.window.open;
global.window = Object.create(window);
global.window.open = jest.fn();
0
serv-inc