1

テストは実行されますが、同じドキュメントにレンダリングされます。componentDidMount スタイル コンポーネントでは、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; }`);
  });
});

各テストで成長する head 内のターゲット スタイル要素の 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)

2 番目のテストに最初の結果がどのように含まれているかがわかりますか? 目標は、新しいドキュメントにレンダリングすることでそれを回避することです。

.reactive-style要素のinnerHTMLを空白にするなど、いくつかのことを試しましdocument.head.querySelector('.reactive-style').innerHTML = '';たexpect()が、styleNode.textContentショーを空として実行すると機能しません(おそらくexpect()非同期で実行され、innerHTML同期的にクリアされるため)。乾杯、ご協力ありがとうございます。

4

0 に答える 0