Dev Faq
6
votes

Comment tester les arguments passés dans document.body.appendChild avec jest

J'ai une fonction qui crée un élément de script et l'ajoute au corps. Cela ressemble un peu à ceci: 

typeof document.body.appendChild.mock.child[0][0] // object

J'utilise des tests en utilisant jest et j'espionne la fonction appendChild pour affirmer que les paramètres transmis sont ce que j'attends . Ce que j'ai ressemble à ceci: 

jest.spyOn(document.body, 'appendChild');

doFunction();

expect(document.body.appendChild).toBeCalledWith(
  '<script id="abc" src="https://myscript" type="text/javascript" />',
);

Malgré la correspondance des chaînes, l'argument qui est passé dans appendChild n'est pas une chaîne, mais un objet . 

const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://myscript';
s.id = 'abc';

document.body.appendChild(s);

J'ai aussi essayé de m'affirmer contre un objet ( {type: '...'} sans chance. Quelles sont les autres options disponibles avec blague pour tester ce bout de code?

0 commentaires

3 Réponses :

2
votes

Vous pouvez affirmer que appendChild est appelé avec un élément HTML, ce que renvoie document.createElement . 

expect(document.body.appendChild).toBeCalledWith(expect.any(HTMLScriptElement));

Vous pouvez clarifiez davantage votre test en vérifiant qu'il a été appelé avec un élément de script. 

expect(document.body.appendChild).toBeCalledWith(expect.any(HTMLElement));

1 commentaires

Merci! Savez-vous s'il existe un moyen d'inspecter le HTMLScriptElement appelé avec? par exemple. pour vérifier que le champ src est ce que j'attends

7
votes

Comme le souligne @Alex, document.createElement crée un objet HTMLScriptElement .

Vous pouvez vérifier que le HTMLScriptElement a été créé correctement en vérifiant ses propriétés avec expect.objectContaining:

const doFunction = () => {
  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://myscript';
  s.id = 'abc';

  document.body.appendChild(s);
}

test('doFunction', () => {
  jest.spyOn(document.body, 'appendChild');

  doFunction();

  expect(document.body.appendChild).toBeCalledWith(
    expect.objectContaining({
      type: 'text/javascript',
      src: 'https://myscript/',
      id: 'abc'
    })
  ); // Success!
});

2 commentaires

Bien - j'aime cette approche car elle teste plus de code, et en conjonction avec expect.any (HTMLScriptElement) , elle teste tout ce dont j'ai besoin

Bonjour @ChristopherMoore J'obtiens cette ERREUR ==> Attendu: ObjectContaining {"id": "script1", "src": "app / components / myse / quoteandorderconfirmation / script / script‌ 1.js", "type": " text / javascript "} Reçu: