JSDOM：无法解析 CSS 样式表

使用以下命令：

./node_modules/babel-core/register.js ./node_modules/jsdom-global/register.js **/*_spec.jsx

我正在运行以下测试文件：

"use strict";

import React from 'react';
import {expect} from 'chai';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {Home} from '../../../src/home/home.jsx';

Enzyme.configure({adapter: new Adapter()});

describe('<Home />', () => {
    const setup = () => {
        const props = {
            isButtonOn: true,
            toggleButton: () => null,
        };
        return Enzyme.shallow(<Home {...props}/>);
    };

    it('should a title and a button', () => {
        const wrapper = setup();
        expect(wrapper.find('.title').length).to.equal(1);
        expect(wrapper.find('button').length).to.equal(1);
    });
});

它测试以下组件：

"use strict";

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {toggleButton} from '../store/home/actions.js';
import swal from 'sweetalert2';

export class Home extends React.Component {
    constructor() {
        super();
        this._toggleButton = this._toggleButton.bind(this);
    }

    _toggleButton() {
        // Invoke swal() here
    }

    render() {
        return (
            <div className="home">
                <div className="title">
                    <u>Frontend Template</u>
                </div>
                <div>
                    <button onClick={this._toggleButton}/>
                </div>
            </div>
        );
    }
}

但是，即使测试用例失败，我也会收到以下错误消息以及（下面省略）无法解析的 css 文件的内容：

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:35:21)
    at HTMLStyleElementImpl._updateAStyleBlock (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:37:12)
    at HTMLStyleElementImpl.insertBefore (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:225:14)
    at HTMLStyleElementImpl.appendChild (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:327:17)
    at HTMLStyleElement.appendChild (/home/jbunker/IdeaProjects/frontend-template/node_modules/jsdom/lib/jsdom/living/generated/Node.js:192:45)
    at injectCSS (/home/jbunker/IdeaProjects/frontend-template/node_modules/sweetalert2/dist/sweetalert2.all.js:2053:11)
    at /home/jbunker/IdeaProjects/frontend-template/node_modules/sweetalert2/dist/sweetalert2.all.js:2057:1
    at styles (/home/jbunker/IdeaProjects/frontend-template/node_modules/sweetalert2/dist/sweetalert2.all.js:6:82)
    at Object.<anonymous> (/home/jbunker/IdeaProjects/frontend-template/node_modules/sweetalert2/dist/sweetalert2.all.js:9:2)
    at Module._compile (module.js:569:30)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/jbunker/IdeaProjects/frontend-template/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/jbunker/IdeaProjects/frontend-template/src/home/home.jsx:7:1)
    at Module._compile (module.js:569:30)
    at loader (/home/jbunker/IdeaProjects/frontend-template/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/home/jbunker/IdeaProjects/frontend-template/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/jbunker/IdeaProjects/frontend-template/test/test_react/home/home_spec.jsx:7:1)
    at Module._compile (module.js:569:30)
    at loader (/home/jbunker/IdeaProjects/frontend-template/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/home/jbunker/IdeaProjects/frontend-template/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at /home/jbunker/IdeaProjects/frontend-template/node_modules/mocha/lib/mocha.js:231:27
    at Array.forEach (native)
    at Mocha.loadFiles (/home/jbunker/IdeaProjects/frontend-template/node_modules/mocha/lib/mocha.js:228:14)
    at Mocha.run (/home/jbunker/IdeaProjects/frontend-template/node_modules/mocha/lib/mocha.js:536:10)
    at Object.<anonymous> (/home/jbunker/IdeaProjects/frontend-template/node_modules/mocha/bin/_mocha:582:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3

当我从组件中删除以下行时：

import swal from 'sweetalert2';

错误消息消失。这让我相信 sweetalert2 中使用的 css 没有被 JSDOM 正确解析。一个潜在的解决方案似乎是使用虚拟控制台：

const virtualConsole = new jsdom.VirtualConsole();
const dom = new JSDOM(``, { virtualConsole });

或者发送到控制台并忽略错误：

virtualConsole.sendTo(console, {omitJSDOMErrors: true});

然而，我并没有通过这些方法取得成功。

我该怎么做才能避免此错误污染我的控制台？

编辑：我可以通过将 JSDOM 逻辑放在一个单独的文件中来解决这个问题：

"use strict";

process.env.NODE_ENV = 'test';

require('babel-register')();

const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const virtualConsole = new jsdom.VirtualConsole();
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>', {virtualConsole});

global.document = dom.window.document;
global.window = dom.window.document.defaultView;
global.navigator = {userAgent: 'node.js'};
global.requestAnimationFrame = () => null;

const exposedProperties = ['window', 'navigator', 'document'];
Object.keys(document.defaultView).forEach((property) => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

然后，我在 script 下的 package.json 中添加了以下行：

"test": "mocha --reporter progress tools/testSetup.js \"**/*_spec.jsx\""

通过跑步npm test，我得到的测试结果没有任何控制台污染。

正如 @JKB 提到的，使用此代码修复了错误。

const virtualConsole = new jsdom.VirtualConsole();
const dom = new JSDOM(``, { virtualConsole });