测试反应组件componentDidMount,如何在每次测试后渲染到新文档?

时间:2016-09-05 22:53:11

标签: reactjs jasmine jestjs reactjs-testutils

测试运行,但它们呈现在同一文档中。在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被同步清除)。欢呼和感谢任何帮助。

0 个答案:

没有答案