Se moquant de "document" dans la plaisanterie

Je suis en train d'écrire des tests pour mes composants web des projets dans la plaisanterie. J'ai déjà utiliser babel avec es2015 preset. Je suis confronté à un problème lors du chargement du fichier js. J'ai suivi un morceau de code où document objet a une currentScript objet. Mais dans le test contexte, il est null. Je pensais donc de se moquer de même. Mais jest.fn() est pas vraiment dans le même. Comment puis-je gérer ce problème?

Morceau de code où la plaisanterie est un échec.

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

Cas de Test que j'ai écrit. component.test.js

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

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

Voici l'erreur renvoyée par plaisanterie

Test suite failed to run

    TypeError: Cannot read property 'ownerDocument' of null

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

Mise à jour:
Conformément à la suggestion de Andreas Köberle, j'ai ajouté quelques les variables globales et a essayé de se moquer comme suit

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

Mais pas de chance

Mise à jour: j'ai essayé le code ci-dessus sans __dev__. Aussi par la mise en document en tant que global.

Avez-vous essayé d'utiliser global.document?
oui..j'ai essayé..pas de chance..
J'ai donc utilisé jsdom comme

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

Et d'après ce que j'ai virer de bord sur tout ce que je veux pour le document et sont disponibles dans mes tests.
en fait le problème ici est, jsdom est très simple et n'a pas webcomponents API. De toute façon temporairement résolu que par ma réponse.

OriginalL'auteur thecodejack | 2016-12-12

10

J'ai résolu ce problème en utilisant setUpFiles propriété dans la plaisanterie. Ceci exécutera après jsdom et avant chaque essai, ce qui est parfait pour moi.

Ensemble setupFiles, dans la Plaisanterie de config, par exemple:
```
"setupFiles": ["<rootDir>/browserMock.js"]


//browserMock.js
Object.defineProperty(document, 'currentScript', {
  value: document.createElement('script'),
});
```
Situation idéale serait de chargement webcomponents.js de polyfill de la jsdom.

OriginalL'auteur thecodejack
8

Similaire à ce que d'autres ont dit, mais au lieu d'essayer de se moquer des DOM-vous, il suffit d'utiliser JSDOM:

__mocks__/client.js
```
import { JSDOM } from "jsdom"
const dom = new JSDOM()
global.document = dom.window.document
global.window = dom.window
```
Puis dans votre plaisanterie config:
```
"setupFiles": [
  "./__mocks__/client.js"
],
```
OriginalL'auteur Patrick Lee Scott
2

Je pouvais résoudre ce problème à l'aide de global portée sur un module nodejs, réglage de document avec la maquette du document, dans mon cas, 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..qui ne mais il est très simple cas d'utilisation...webcomponents.js nous avons grand ensemble d'API interconnectés. Se moquant d'eux est un enfer d'une tâche...
Mais dans votre cas, ce que vous avez besoin de se moquer exactement?

OriginalL'auteur Renato B.
1

Si comme moi vous êtes à la recherche pour se moquer de document non défini (par exemple, server side /côté client, tests), j'ai été en mesure d'utiliser l'objet.defineProperty à l'intérieur de ma suites de test sans avoir à utiliser setupFiles

Exemple:
```
beforeAll(() => {
  Object.defineProperty(global, 'document', {});
})
```
J'ai essayé de se moquer de document.referrer et document.URL en leur fournissant de l'objet...pas de chance. Les propriétés de toujours montré, comme à leur habitude, les valeurs de test runner.
J'ai remarqué cette solution de travail dans certaines versions de Nœud et pas d'autres. Peut-être l'installer dans la mémoire non volatile et d'avoir un jeu avec les différentes versions
Merci pour l'astuce! Je vais jouer avec le Noeud de la version et de poster quelques résultats! J'aime vraiment cette stratégie de mieux que d'utiliser la Plaisanterie config. Je travaille sur une grosse équipe, et il est préférable de garder notre unité des essais isolés et, bien sûr atomique!
Confirmant -- L'application, où j'ai essayé c'est l'aide d'un Noeud v8.11.1 et Jest 21.2.1

OriginalL'auteur tctc91
0

Si vous avez besoin de définir les valeurs d'essai pour les propriétés, il y a un peu plus à l'approche granulaire. Chaque propriété doit être définie individuellement, et il est également nécessaire de rendre les propriétés writeable:
```
Object.defineProperty(window.document, 'URL', {
  writable: true,
  value: 'someurl'
});
```
Voir: https://github.com/facebook/jest/issues/890

Cela a fonctionné pour moi à l'aide de la Plaisanterie 21.2.1 et Nœud v8.11.1

OriginalL'auteur theUtherSide
0

J'ai été aux prises avec les moqueries de document pour un projet, je suis sur. Je fais appel document.querySelector() à l'intérieur d'une Réagir composant et assurez-vous que cela fonctionne. En fin de compte c'est ce qui a fonctionné pour moi:
```
it('should test something', () => {
    const spyFunc = jest.fn();
    Object.defineProperty(global.document, 'querySelector', { value: spyFunc });
    <run some test>
    expect(spyFunc).toHaveBeenCalled()
});
```
OriginalL'auteur strausd

Vous devez vous connecter pour publier un commentaire.