Tests run, but they are rendering into the same document. On componentDidMount Style component appends CSS text to a style element in head with the class .reactive-style (know this is unorthodox and not idiosyncratic React). If .reactive-style does not already exist then the style element is created and added to head. Testing wise -- for simplicities sake -- I need to render into a new document for each test case.
Tests look like this:
import React from 'react';
import { findDOMNode, render } from 'react-dom';
import TestUtils from 'react-addons-test-utils';
const removeNewlines = (string) => (string.replace(/(\r\n|\n|\r)/gm, ''))
import Style from '../src/index.js';
describe('Style', () => {
it('scopes only one root selector if a selector is union root selector', () => {
const myTestUtils = Object.assign({}, TestUtils);
const wrapper = myTestUtils.renderIntoDocument(
<div>
<Style>
{`
#box.rootClass { color: red; }
`}
<div id="box" className="rootClass" />
</Style>
</div>
);
const rootNode = findDOMNode(wrapper).children[0];
const styleNode = document.head.querySelector('.reactive-style');
expect(rootNode.className).toEqual('rootClass _scoped-1830358384');
expect( removeNewlines(styleNode.textContent) )
.toEqual(` #box._scoped-1356475730.rootClass , ._scoped-1356475730 #box.rootClass { color: red; }`);
});
it('preserves quotes for the CSS property "content"', () => {
const myTestUtils = Object.assign({}, TestUtils);
const wrapper = myTestUtils.renderIntoDocument(
<div>
<Style>
{`
.Slide:before { content: " test "; }
.Slide:after { content: " "; }
.Foo:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
backgroud-color: rgba( 0, 0, 0, .7);
top: 0;
left: 0;
z-index: 1;
}
`}
<div className="Slide" />
</Style>
</div>
);
const rootNode = findDOMNode(wrapper).children[0];
const styleNode = document.head.querySelector('.reactive-style');
expect(rootNode.className).toEqual('Slide _scoped-864836516');
expect( removeNewlines(styleNode.textContent) )
.toEqual(` .Slide._scoped-864836516:before , ._scoped-864836516 .Slide:before { content: ' test '; } .Slide._scoped-864836516:after , ._scoped-864836516 .Slide:after { content: ' '; }._scoped-864836516 .Foo:after { position: absolute; content: ''; width: 100%; height: 100%; backgroud-color: rgba( 0, 0, 0, .7); top: 0; left: 0; z-index: 1; }`);
});
});
Current output showing the innerHTML of the target style element in head growing with each test (undesired, want new document for each test case):
FAIL __tests__/Style.js (0.613s)
● Style › it scopes only one root selector if a selector is union root selector
- Expected ' #box._scoped-1830358384.rootClass , ._scoped-1830358384 #box.rootClass { color: red; }' to equal ' #box._scoped-1356475730.rootClass , ._scoped-1356475730 #box.rootClass { color: red; }'.
at jasmine.buildExpectationResult (node_modules/jest-jasmine2/src/index.js:80:44)
at Object.eval (__tests__/Style.js:315:5)
at Object.<anonymous> (node_modules/jest-jasmine2/src/jasmine-pit.js:35:32)
at jasmine2 (node_modules/jest-jasmine2/src/index.js:253:7)
at Test.run (node_modules/jest-cli/src/Test.js:44:12)
at process._tickCallback (internal/process/next_tick.js:103:7)
● Style › it preserves quotes for the CSS property "content"
- Expected ' #box._scoped-1830358384.rootClass , ._scoped-1830358384 #box.rootClass { color: red; }' to equal ' .Slide._scoped-864836516:before , ._scoped-864836516 .Slide:before { content: ' test '; } .Slide._scoped-864836516:after , ._scoped-864836516 .Slide:after { content: ' '; }._scoped-864836516 .Foo:after { position: absolute; content: ''; width: 100%; height: 100%; backgroud-color: rgba( 0, 0, 0, .7); top: 0; left: 0; z-index: 1; }'.
at jasmine.buildExpectationResult (node_modules/jest-jasmine2/src/index.js:80:44)
at Object.eval (__tests__/Style.js:349:5)
at Object.<anonymous> (node_modules/jest-jasmine2/src/jasmine-pit.js:35:32)
at Object.<anonymous> (node_modules/jest-jasmine2/src/jasmine-pit.js:40:11)
at jasmine2 (node_modules/jest-jasmine2/src/index.js:253:7)
at Test.run (node_modules/jest-cli/src/Test.js:44:12)
at process._tickCallback (internal/process/next_tick.js:103:7)
2 tests failed, 0 tests passed (2 total in 1 test suite, run time 1.323s)
See how the second test includes results from the first? Goal is to avoid that by rendering to a new document.
Have tried several things, like blanking out the innerHTML of the .reactive-style element via document.head.querySelector('.reactive-style').innerHTML = ''; but when expect() runs the styleNode.textContent shows as empty so that does not work (presumably because expect() is running async and the innerHTML is cleared synchronously). Cheers and thanks for any assistance.
