Using JEST to test DOM Elements
Question
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.
2 answers
solution1
1 2019-02-21 03:42:49
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);
});
solution2
0 2019-02-21 03:10:06
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();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.