Question

我正在尝试使用jsdom和jest做最简单的事情-加载HTML文件以测试其DOM：

const jsdom = require('jsdom');
const {JSDOM} = jsdom;

JSDOM.fromFile('../src/index.html'), {})
    .then(dom => {
        console.log(dom.serialize());

        // need to run tests here...
    })
    .catch(error => {
        console.log(error);
    });

然后出现以下错误：

错误：无法识别编码：'UTF-8'（搜索为：'utf8'）

我发现库here遇到了同样的问题，该库已关闭，没有提供任何解决方案。

花了很多时间之后，我感到很困惑，因为我找不到解决这种基本任务的任何方法：（

有什么办法解决这个问题吗？

Answer 1

更好的方法是将文件读取为字符串，然后完全不使用fromFile（）：

/* eslint-env jest, es6, node */

// loads the necessary node packages
const jsdom = require( 'jsdom' );
const { JSDOM } = jsdom;
const fs = require( 'fs' );

// __dirname is a Node.js global object
// https://nodejs.org/api/globals.html
const html = fs.readFileSync( __dirname + '/app/donation-types.html' ).toString();

// HTML to be imported as DOM
// const html = './app/donation-types.html';
var dom = new JSDOM( html );

// set the global window and document objects using JSDOM
// global is a node.js global object
if ( global !== undefined ) {
  global.window = dom.window;
  global.document = dom.window.document;
}

// requires my code to be tested
require( './app/file.js' );

test( 'sees if window is available before loading DOM...', () => {
    expect( window !== undefined ).toBe( true );
} );

test( 'verifies document is available before loading DOM...', () => {
    expect( document !== undefined && document !== null ).toBe( true );
} );

Answer 2

在@Patrick Lewis的答案中，您可以添加以下内容以开始选择元素：

const doc = dom.window.document
const box = doc.querySelector("#blue-box")

尽管我终生无法理解，但为何如此：

const $ = doc.window.document.querySelector
const box = $("#blue-box")

Answer 3

在Jest上，将此文件放在文件顶部对我来说很有效：

 require('iconv-lite').encodingExists('foo'); // utf-8 support

我不知道为什么。：-|

jsdom错误：utf-8无法识别为HTML编码

3 个答案: