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

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

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

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

Jestを使用して、をモックする方法がわかりませんwindow。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]

テストケースはどうすればよいですか？任意の提案やヒントをいただければ幸いです。

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);

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

これはJest24.8でした（私は信じています）：

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

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

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

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

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

Jestでグローバルをモックする方法はいくつかあります。

1. mockImplementationアプローチ（ほとんどのJestのような方法）を使用しますがjsdom、によって提供されるデフォルトの実装がある変数に対してのみ機能しwindow.openます。

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. グローバルプロパティに直接値を割り当てます。最も簡単ですが、一部のwindow変数でエラーメッセージが表示される場合があります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. グローバルを直接使用しないでください（少しリファクタリングが必要です）

グローバル値を直接使用する代わりに、別のファイルからインポートする方がクリーンな場合があるため、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}`);
  }
}

あなたはこれを試すことができます：

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

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

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

私はそれを行う簡単な方法を見つけました：削除して置き換える

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
  });
});

私のコンポーネントでは、アクセスする必要がありますwindow.location.search。これは、jestテストで行ったことです。

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

ウィンドウのプロパティがテストごとに異なる必要がある場合は、ウィンドウのモックを関数に入れて、さまざまなテストをオーバーライドするために書き込み可能にすることができます。

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

そして、各テスト後にリセットします

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

に直接割り当てjest.fn()ていwindow.openます。

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

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

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

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