title: JSDOM: Could not parse CSS stylesheet
body: <p>With the following command:</p>
  
  <pre><code>./node_modules/babel-core/register.js ./node_modules/jsdom-global/register.js **/*_spec.jsx
  </code></pre>
  
  <p>I am running the following test file:</p>
  
  <pre><code>"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('&lt;Home /&gt;', () =&gt; {
      const setup = () =&gt; {
          const props = {
              isButtonOn: true,
              toggleButton: () =&gt; null,
          };
          return Enzyme.shallow(&lt;Home {...props}/&gt;);
      };
  
      it('should a title and a button', () =&gt; {
          const wrapper = setup();
          expect(wrapper.find('.title').length).to.equal(1);
          expect(wrapper.find('button').length).to.equal(1);
      });
  });
  </code></pre>
  
  <p>Which tests the following component:</p>
  
  <pre><code>"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 (
              &lt;div className="home"&gt;
                  &lt;div className="title"&gt;
                      &lt;u&gt;Frontend Template&lt;/u&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;button onClick={this._toggleButton}/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>However, even if the test cases fail, I get the following error message as well as (omitted below) the contents of the css file that cannot be parsed:</p>
  
  <pre><code>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.&lt;anonymous&gt; (/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.&lt;anonymous&gt; (/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.&lt;anonymous&gt; (/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.&lt;anonymous&gt; (/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
  </code></pre>
  
  <p>When I remove the following line from my component:</p>
  
  <pre><code>import swal from 'sweetalert2';
  </code></pre>
  
  <p>The error message disappears. This leads me to believe that the css used in sweetalert2 is not properly being parsed by JSDOM. A potential solution seems to be to use virtual consoles:</p>
  
  <pre><code>const virtualConsole = new jsdom.VirtualConsole();
  const dom = new JSDOM(``, { virtualConsole });
  </code></pre>
  
  <p>or to send to a console while omitting errors:</p>
  
  <pre><code>virtualConsole.sendTo(console, {omitJSDOMErrors: true});
  </code></pre>
  
  <p>However, I have not had success with these approaches.</p>
  
  <p>What can I do to avoid polluting my console with this error?</p>
  
  <p>EDIT: I was able to solve this by placing my JSDOM logic in a separate file:</p>
  
  <pre><code>"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('&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;', {virtualConsole});
  
  global.document = dom.window.document;
  global.window = dom.window.document.defaultView;
  global.navigator = {userAgent: 'node.js'};
  global.requestAnimationFrame = () =&gt; null;
  
  const exposedProperties = ['window', 'navigator', 'document'];
  Object.keys(document.defaultView).forEach((property) =&gt; {
      if (typeof global[property] === 'undefined') {
          exposedProperties.push(property);
          global[property] = document.defaultView[property];
      }
  });
  </code></pre>
  
  <p>Then, I added the following line in my package.json under scripts:</p>
  
  <pre><code>"test": "mocha --reporter progress tools/testSetup.js \"**/*_spec.jsx\""
  </code></pre>
  
  <p>By running <code>npm test</code>, I get the test results without any console pollution.</p>