web-dev-qa-db-ja.com

jestで「ドキュメント」をモックする

JestでWebコンポーネントプロジェクトのテストを作成しようとしています。私はすでにes2015プリセットでバベルを使用しています。 jsファイルの読み込み中に問題に直面しています。私はdocumentオブジェクトがcurrentScriptオブジェクトを持っているコードに従っています。ただし、テストコンテキストではnullです。だから私は同じことをあざけることを考えていた。ただし、jest.fn()は実際には役立ちません。この問題に対処するにはどうすればよいですか？

Jestが失敗しているコードの一部。

var currentScriptElement = document._currentScript || document.currentScript;
var importDoc = currentScriptElement.ownerDocument;

私が書いたテストケース。 component.test.js

import * as Component from './sample-component.js';

describe('component test', function() {
  it('check instance', function() {
    console.log(Component);
    expect(Component).toBeDefined();
  });
});

Jestによってスローされるエラーは次のとおりです

Test suite failed to run

    TypeError: Cannot read property 'ownerDocument' of null

      at src/components/sample-component/sample-component.js:4:39

更新： AndreasKöberleからの提案に従って、いくつかのグローバル変数を追加し、次のようにモックしようとしました。

__DEV__.document.currentScript = document._currentScript = {
  ownerDocument: ''
};
__DEV__.window = {
  document: __DEV__.document
}
__DEV__.document.registerElement = jest.fn();

import * as Component from './arc-sample-component.js';

describe('component test', function() {
  it('check instance', function() {
    console.log(Component);
    expect(Component).toBeDefined();
  });
});

しかし、運はありません

更新：上記のコードを__dev__なしで試しました。また、ドキュメントをグローバルとして設定します。

jestjsjsdombabel-jest
30
thecodejack

JestでsetUpFilesプロパティを使用してこれを解決しました。これはjsdomの後、そして私にとって完璧な各テストの前に実行されます。

Jest configでsetupFilesを設定します。例：

"setupFiles": ["<rootDir>/browserMock.js"]


// browserMock.js
Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});

理想的な状況は、webcomponents.jsを読み込んでjsdomをポリフィルすることです。

11
thecodejack

他の人が言ったことに似ていますが、自分でDOMをモックしようとする代わりに、JSDOMを使用してください：

__ mocks __/client.js

import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window

次に、jest configで：

"setupFiles": [
  "./__mocks__/client.js"
],
14
Patrick Lee Scott

Nodejsでglobalスコープモジュールを使用してこの同じ問題を解決し、ドキュメントのモックでドキュメントを設定します。私の場合はgetElementsByClassName：

// My simple mock file
export default {
    getElementsByClassName: () => {
        return [{
            className: 'welcome'
        }]
    }
};

// Your test file
import document from './name.component.mock.js';
global.document = {
    getElementsByClassName: document.getElementsByClassName
};
3
Renato B.

私のように、未定義にドキュメントをモックすることを探している場合（例えば、サーバー側/クライアント側のテスト用）、setupFilesを使用せずにテストスイート内でobject.definePropertyを使用できました

例：

beforeAll(() => {
  Object.defineProperty(global, 'document', {});
})
2
tctc91

私は自分が取り組んでいるプロジェクトの文書のモック作成に苦労しています。 Reactコンポーネント内でdocument.querySelector()を呼び出していますが、正しく機能していることを確認する必要があります。最終的にこれは私のために働いたものです：

it('should test something', () => {
    const spyFunc = jest.fn();
    Object.defineProperty(global.document, 'querySelector', { value: spyFunc });
    <run some test>
    expect(spyFunc).toHaveBeenCalled()
});
2
strausd

プロパティのテスト値を定義する必要がある場合は、もう少しきめ細かいアプローチがあります。各プロパティは個別に定義する必要があり、プロパティをwriteableにする必要もあります。

Object.defineProperty(window.document, 'URL', {
  writable: true,
  value: 'someurl'
});

参照： https://github.com/facebook/jest/issues/89

これは、Jest 21.2.1およびNode v8.11.1を使用してうまくいきました。

0
theUtherSide