如何配置 jest 使用的 jsdom 实例？答案

【问题标题】：How can I configure the jsdom instance used by jest?如何配置 jest 使用的 jsdom 实例？
【发布时间】：2016-04-27 22:35:09
【问题描述】：

我遇到过这个问题Invalid URL is thrown when requiring systemjs in jest test cases

最后一个 cmets 建议

“通过在 jsdom 中设置引用者配置来操作 jsdom 实例以获得有效的位置 / baseURI。”

我想知道有没有办法让我这样做？我可以通过jest 对象以某种方式访问jsdom 实例吗？

【问题讨论】：

标签： jestjs jsdom systemjs

【解决方案1】：

在使用需要 url (location.href) 的项目时，我遇到了类似的问题。您可以在配置中使用 testURL 来配置 jest。

这是您可以在 package.json 中放入的内容（如果这是您配置 jest 的方式）。

"jest": {
    ...other config,
    "testURL": "http://localhost:8080/Dashboard/index.html"
}

testURL Doc

如果您需要对 jsdom 进行更具体的更改，您可以自己安装 jsdom，并与 jest 分开导入和配置。这是一个例子：

test.js

'use strict';
import setup from './setup';
import React from 'react';
import { mount } from 'enzyme';
import Reportlet from '../components/Reportlet.jsx';

it('Reportlet Renders', () => {
    ...some test stuff
});

setup.js

import jsdom from 'jsdom';
const DEFAULT_HTML = '<html><body></body></html>';

// Define some variables to make it look like we're a browser
// First, use JSDOM's fake DOM as the document
global.document = jsdom.jsdom(DEFAULT_HTML);

// Set up a mock window
global.window = document.defaultView;
global.window.location = "https://www.bobsaget.com/"
// ...Do extra loading of things like localStorage that are not supported by jsdom

【讨论】：

【解决方案2】：

我刚走这条路，发现从 Jest 21.2.1 开始，官方的方法是 fork 自己的 JSDom 环境。

设置起来有点麻烦，但允许进行深入的自定义。

参考资料：

示例环境：https://github.com/mes/jest-environment-jsdom-external-scripts

【讨论】：

这肯定是困难模式。但我在网上没有看到任何其他替代方案，Jest 的官方立场似乎是“不”。

【解决方案3】：

jsdom是最新版Jest使用的默认环境，所以你可以简单地操作window、document或location等全局变量。

【讨论】：

从 jsdom v11 开始，window.location 对象变得不可配置，因此不能再用Object.defineProperty() 修改。

【解决方案4】：

如果您使用 jsdom（版本 11.12.0）而不使用 jest（例如，使用 ava + enzyme）然后你可以在 jsdom 配置文件中设置 url

文件src/test/jsdom-config.js

const jsdom = require('jsdom') // eslint-disable-line
const { JSDOM } = jsdom

const dom = new JSDOM('<!DOCTYPE html><head/><body></body>', {
  url: 'http://localhost/',
  referrer: 'https://example.com/',
  contentType: 'text/html',
  userAgent: 'Mellblomenator/9000',
  includeNodeLocations: true,
  storageQuota: 10000000,
})
global.window = dom.window
global.document = window.document
global.navigator = window.navigator

package.json中的AVA设置

{
  ...
  "scripts": ...
  ...
  "ava": {
    "babel": "inherit",
    "files": [
      "src/**/*.test.js"
    ],
    "verbose": true,
    "require": [
      "babel-register",
      "ignore-styles",
      "./src/test/jsdom-setup.js",
      "./src/test/enzyme-setup.js"
    ]
  }
}

【讨论】：

附注我刚刚在尝试解决我的非开玩笑问题时发现了这个问题