Spott `Dokument` im Scherz

Ich versuche, tests schreiben, für meine web-Komponenten Projekte im Scherz. Ich verwende bereits babel mit es2015 voreingestellt. Ich bin vor ein Problem beim laden der js-Datei. Ich habe ein Stück code, wo document Objekt hat einen currentScript Objekt. Aber im test-Kontext ist es null. Also dachte ich mir der Spott gleich. Aber jest.fn() ist nicht wirklich zu helfen. Wie kann ich damit umgehen?

Stück code, wo den Scherz nicht.

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

Test case, die ich geschrieben habe. component.test.js

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

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

Folgenden wird der Fehler ausgelöst, indem Sie den Scherz

Test suite failed to run

    TypeError: Cannot read property 'ownerDocument' of null

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

Update:
Gemäß Vorschlag von Andreas Köberle, ich habe einige Globale vars und versuchte, Sie zu verspotten, wie folgende

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

Aber kein Glück

Update: ich habe versucht, obigen code ohne __dev__. Auch durch die Einstellung Dokument als global.

Haben Sie versucht, mit global.document?
ja..ich habe das ausprobiert..kein Glück..
Also habe ich im Grunde verwendet, jsdom wie

const jsdom = require('jsdom');  const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>'; global.document = jsdom.jsdom(documentHTML);

Und danach habe ich eine Wende auf alles, was ich will, um das Dokument und dessen zur Verfügung, die in den tests.
eigentlich problem hier ist, jsdom ist sehr einfach und nicht webcomponents API. Jedenfalls vorübergehend behoben, es als pro meine Antwort.

InformationsquelleAutor thecodejack | 2016-12-12

10

Ich habe dieses Problem gelöst, mit setUpFiles Eigenschaft im Scherz. Dies wird ausgeführt, nachdem jsdom und vor jedem test die ist perfekt für mich.

Set setupFiles, im Scherz config, z.B.:
```
"setupFiles": ["<rootDir>/browserMock.js"]


//browserMock.js
Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});
```
Ideale situation wäre be-webcomponents.js zu polyfill die jsdom.

InformationsquelleAutor thecodejack
8

Ähnlich zu dem, was andere gesagt haben, aber anstatt zu versuchen, zu verspotten, der DOM selbst, nur mit JSDOM:

__mocks__/client.js
```
import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window
```
Dann im Scherz config:
```
"setupFiles": [
  "./__mocks__/client.js"
],
```
InformationsquelleAutor Patrick Lee Scott
2

Konnte ich lösen das gleiche Problem mit global Modul von scope, das auf nodejs, Einstellung Dokument mit mock-Dokument, in meinem Fall 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
};
```
yep..das tut, aber es ist sehr einfach Anwendungsfall...webcomponents.js wir haben eine große Sammlung von API miteinander verbunden. Imitieren Sie ist eine Hölle von einer Aufgabe...
Aber in deinem Fall, was Sie brauchen mock genau?

InformationsquelleAutor Renato B.
1

Wenn, wie mir, du bist auf der Suche nach mock-Dokument nicht definiert ist (z.B. für server-side /client side tests) konnte ich mit dem Objekt.defineProperty in meinem test-Suiten ohne setupFiles

Beispiel:
```
beforeAll(() => {
  Object.defineProperty(global, 'document', {});
})
```
Ich versuchte, Sie zu verspotten document.referrer und document.URL indem Sie in der Objekt...kein Glück. Die Eigenschaften noch zeigte sich als Ihre üblichen Werte im test-runner.
Ich habe bemerkt, diese Lösung funktioniert in einigen Versionen von Knoten und andere nicht. Vielleicht installieren die NVM und haben ein Spiel mit verschiedenen Versionen
Danke für den Tipp! Ich Spiel mit Knoten version und nach ein paar Erkenntnisse! Ich mag diese Strategie, die besser als der Scherz config. Ich arbeite auf ein großes team, und es ist besser, um unsere unit-tests isoliert und, natürlich atomic!
Bestätigung -- Die app wo ich habe versucht, dies mithilfe von Knoten v8.11.1 und Scherz 21.2.1

InformationsquelleAutor tctc91
0

Wenn Sie brauchen, um zu definieren test-Werte für Eigenschaften, es ist eine etwas differenziertere Vorgehensweise. Jede Eigenschaft muss einzeln definiert werden, und es ist auch notwendig, um die Eigenschaften writeable:
```
Object.defineProperty(window.document, 'URL', {
  writable: true,
  value: 'someurl'
});
```
Finden Sie unter: https://github.com/facebook/jest/issues/890

Dieser arbeitete für mich über den Scherz 21.2.1 und Knoten v8.11.1

InformationsquelleAutor theUtherSide
0

Habe ich Schwierigkeiten mit Spott Dokument für ein Projekt, das ich bin auf. Ich rufe document.querySelector() innerhalb einer Reagieren Komponente und brauchen, um sicherzustellen, dass es richtig funktioniert. Letztlich ist dies das, was für mich gearbeitet:
```
it('should test something', () => {
    const spyFunc = jest.fn();
    Object.defineProperty(global.document, 'querySelector', { value: spyFunc });
    <run some test>
    expect(spyFunc).toHaveBeenCalled()
});
```
InformationsquelleAutor strausd

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.