测试运行,但它们呈现在同一文档中。在componentDidMount Style组件中,将CSS文本附加到头部的样式元素.reactive-style
(知道这是非正统的而不是特殊的React)。如果.reactive-style
尚不存在,则创建样式元素并将其添加到head。明智地测试 - 为了简单起见 - 我需要为每个测试用例渲染一个新文档。
测试看起来像这样:
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; }`);
});
});
当前输出显示每次测试时头部中目标样式元素的innerHTML(不需要的,需要每个测试用例的新文档):
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)
了解第二个测试如何包含第一个测试的结果?目标是通过渲染到新文档来避免这种情况。
已尝试过多项内容,例如通过.reactive-style
删除document.head.querySelector('.reactive-style').innerHTML = '';
元素的innerHTML,但当expect()
运行时,styleNode.textContent
显示为空,这样就无效了(大概是因为expect()
正在运行异步并且innerHTML
被同步清除)。欢呼和感谢任何帮助。