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

Question

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

Demandé el 14 de Mars, 2019: Quand la question a-t-elle été
2572 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

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

document.body.appendChild(s);

Je fais des tests en utilisant jest et j'espionne les appendChild pour vérifier que les paramètres transmis correspondent à 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 concordance des chaînes de caractères, l'argument qui est passé dans la commande appendChild n'est pas une chaîne de caractères, mais un objet.

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

J'ai également essayé d'affirmer contre un objet ( { type: '...' } sans succès. Quelles sont les autres options avec jest pour tester ce bout de code ?

Demandé el 14 de Mars, 2019 par Christopher Moore

Answer 1

3 Réponses

Answer 2

8voto

brian-lives-outdoors Points 5245

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

Vous pouvez vérifier que le HTMLScriptElement a été créé correctement en vérifiant ses propriétés à l'aide de 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!
});

Répondu el 14 de Mars, 2019 par brian-lives-outdoors (5245 Points )

Answer 3

2voto

Alex Robertson Points 422

Vous pouvez affirmer que appendChild est appelé avec un élément HTML, ce qui est le cas de l'élément document.createElement retours.

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

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

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

Répondu el 14 de Mars, 2019 par Alex Robertson (422 Points )

Answer 4

0voto

Paul Mel Points 130

Une autre option consiste à utiliser la fonction (facultative) de jest. inline ) snapshots :

it('...', () => {
  doFunction()
  expect(document.documentElement).toMatchInlineSnapshot(`
      <html>
        <head>
          <!-- ...your appended nodes... -->
        </head>
        <body>
          <!-- ...your appended nodes... -->
        </body>
      </html>
    `)
})

Répondu el 4 de Mai, 2020 par Paul Mel (130 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: