CODEWITHSUNDEEP
javascriptnode.jsjestjs
Elliott de Launay
Elliott de Launay

Reputation: 1168

Using JEST to test DOM Elements

I'm trying to familiarize myself with JEST, so I realize I may be way offsides here... But I want to write a test that validates the title of my Index page, I referenced this documentation: https://jestjs.io/docs/en/tutorial-jquery.

Here is the test:

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");
});

This is what my index.html looks like. 

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

expect() is empty when I try to fetch index.html.

Upvotes: 2

Views: 7616

Answers (2)

Elliott de Launay
Elliott de Launay

Reputation: 1168

Below is solving my problem using fetch - but I'm not convinced this is the best answer will review JEST document regarding 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();
  });
});

Upvotes: 0

blaz
blaz

Reputation: 4078

Not familiar with Jest, but since fetch is asynchronous, you cannot get the fetching result outside of then clause. Consider putting expect inside onSuccess. Please look at https://jestjs.io/docs/en/asynchronous.html for example of handling asynchronous testing.

Also, fetching a html does not return you DOM object of that html file, but a raw text content, so jQuery will not work. You need to parse that raw text into DOM by, for example, DOMParser, and perform testing on the DOM.

Finally, anything that you require to import should be put on top of the file, so move var $ = require('jquery') outside of test function

Sample code (untest)

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

Upvotes: 2

Related Questions