Использование JEST для тестирования элементов DOM - PullRequest
Новая
       1

Использование JEST для тестирования элементов DOM

0 голосов
/ 20 февраля 2019

Я пытаюсь познакомиться с JEST, поэтому я понимаю, что я могу быть далеко за пределами этого ... Но я хочу написать тест, который проверяет заголовок моей страницы индекса, я ссылался на эту документацию: https://jestjs.io/docs/en/tutorial-jquery.

Вот тест: 

import 'whatwg-fetch'
test('H1 in index says Users', () =>{
  //Set up our document body - this is probably my problem...
  document = fetch("/index.html").then(onSuccess, onError);
  //This succeeds:
  //document.body.innerHTML ="<h1>Users</h1>"
  function onSuccess(response) {
    return response.text();
  }
  function onError(error){
    console.log(error);
  }
  const $ = require('jquery');
  expect($("h1").text()).toEqual("Users");
});

Вот так выглядит мой index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <h1>Users</h1>
  </body>
</html>

Ожидайте () пусто, когда я пытаюсь получить index.html.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Не знаком с Jest, но так как выборка асинхронна, вы не можете получить результат выборки вне условия then.Попробуйте положить expect внутрь onSuccess.Пожалуйста, посмотрите на https://jestjs.io/docs/en/asynchronous.html пример обработки асинхронного тестирования.

Кроме того, выборка html не возвращает вам DOM-объект этого html-файла, но является необработанным текстовым содержимым, поэтому jQuery не будет работать.Вам необходимо проанализировать этот необработанный текст в DOM, например, с помощью DOMParser, и выполнить тестирование на DOM.

Наконец, все, что вам нужно импортировать, должно быть помещено поверх файла, поэтому переместите var $ = require('jquery') вне тестовой функции

Пример кода (не протестирован) 

import 'whatwg-fetch'
import $ from "jquery"

test('H1 in index says Users', () =>{
  function onSuccess(response) {
    const rawHTML = response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(rawHTML, 'text/html');

    const h1Text = $(doc).find('h1').text();
    expect(h1Text).toEqual('Users');
    done();
  }

  function onError(error){
    console.log(error);
  }

  fetch("/index.html").then(onSuccess, onError);
});
0 голосов
/ 21 февраля 2019

Ниже решается моя проблема с использованием fetch - но я не уверен, что это лучший ответ, рассмотрим документ JEST относительно mock-fetch: 

//replaced 'whatwg-fetch' - was getting Network Request Failed errors
import fetch from 'isomorphic-fetch';
//moved to top of the document
import $ from "jquery";

//added (done) parameter as per JEST documentation for async calls
test('H1 in index says Users', (done) => {
  function onSuccess(response){
    return response.text();
  }
  function onError(error){
    //updated to throw error as per JEST documentation
    throw new Error(error);
  }
  //fetch requires an absolute URL - therefore server needs to be running,
  //this is fine when jest is being watched, however would require a
  //config file to run tests in multiple environments, 
  //may be a better alternative
  const baseUrl = 'http://localhost:1337';
  fetch(baseUrl+'/').then(onSuccess, onError).then(function(response) {
    //using this format since it was in JEST documentation for DOM manipulation
    document.body.innerHTML = response;

    expect($('h1').text()).toEqual('Users');
    done();
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...