Question

背景

我正在使用React starter kit作为我的反应应用程序。在server.js内部，他们使用renderToStaticMarkup呈现组件，然后使用Html将其传递给dangerouslySetInnerHTML组件，如您所见here

我正在尝试为AboutUs页面创建单元测试。但是因为它在html组件中呈现为字符串，所以单元测试不起作用，因为它无法找到该组件

UNIT TEST

/*REACT*/
var React = require('react');
import ReactDOM from 'react-dom/server';
var TestUtils = require('react-addons-test-utils');

/*Components*/
var AboutUsPage = require('../../src/components/AboutUsPage');
var App = require('../../src/components/App');
var Html = require('../../src/components/Html');

/*UNIT TESTING*/
import sd from 'skin-deep';
var expect = require("chai").expect;

describe('AboutUsPage component', function(){
  let tree;
  let aboutElement;
  before('render and locate element', function() {
    const data = { title: '', description: '', css: '', body: '' };
    const css = [];
    const context = {
      onInsertCss: value => css.push(value),
      onSetTitle: value => data.title = value,
      onSetMeta: (key, value) => data[key] = value,
      onPageNotFound: () => statusCode = 404,
    };
    data.body = ReactDOM.renderToString(<App context={context}><AboutUsPage /></App>);
    data.css = css.join('');

    tree = sd.shallowRender(<Html {...data} />);
    aboutElement = tree.dive(['App','AboutUsPage']); //could not find App or AboutUsPage components
  });

  it('it should have text hi"', function() {
    expect(tree.subTree('.htmlHead').text()).to.equal("hi"); //pass because it was in html component
  });
  it('it should have text hello"', function() {
    expect(aboutElement.subTree('.aboutHead').text()).to.equal("hello"); //fail because it was in aboutus component
  });
});

我正在使用mocha，chai＆amp; skin-deep用于浅层渲染。

那么如何为作为字符串呈现的组件编写单元测试？

Answer 1

这不是单元测试。考虑一下你真正想要测试的东西。它是AboutUsPage的服务器端呈现或AboutUsPage单元测试的完整集成测试吗？

如果您只想测试AboutUsPage，那么请测试它，并且不要将其余组件带到聚会上。这就是单元测试 - 测试单个代码单元。而不是

tree = sd.shallowRender(<Html {...data} />);

只需使用

tree = sd.shallowRender(<AboutUsPage />);

并在tree上执行与AboutUsPage相关的断言。

如果您想测试整个链，那么有几个选项。你已经在data.body中有了渲染的标记字符串，所以你总是可以做一些字符串操作并检查它是否包含你要查找的内容。更好的选择可能是使用像jsdom这样的工具，使您能够在Node环境中对DOM进行操作，并使用普通的DOM选择器来运行您的断言。

如果您真的想在“真实”环境中进行测试，请使用PhantomJS运行测试，这是一个无头浏览器，可以与一大堆测试框架（http://phantomjs.org/headless-testing.html）一起使用。

React renderToString组件单元测试

1 个答案: