测试 React 类是类型答案

【问题标题】：Testing React Class is Of Type测试 React 类是类型
【发布时间】：2014-10-12 06:43:16
【问题描述】：

我正在尝试测试一个反应类，它呈现出其他几个反应类。除了我不完全确定测试方面的最佳实践之外，所有工作都完美无缺。

代码：

父类：

module.exports = function (deps) {

var MixLink = require('views/components/mixLink')(deps);

return React.createClass({

    render: function() {
        return (
            <div class="packshotData mixesPage" data-view="mixlist">
            {
                this.props.mixes.map(function (mix) {
                    return <MixLink mix={mix} />;
                })
            }
            </div>
        );
    }
});

};

儿童班：

module.exports = function (deps) {

var Link = require('views/components/link')(deps);

var mixLink = React.createClass({

    render: function() {
        return (
            <div className="packshotData-item packshotData-item-overlay">
                <Link className="packshotData-item-link" href={this.props.mix.href} data-control="mixplay">
                    <img className="packshotData-item-image packshotHeadphones" src={this.props.mix.thumbnailHref} />
                    <div className="packshotData-item-title-overlay">
                        <span className="packshotData-item-title-text">{this.props.mix.name}</span>
                    </div>
                </Link>
            </div>
        );
    }
});

return mixLink;

};

测试：

describe('mixLinkList Component', function () {

var MixLinkList = require('views/components/mixLinkList')({}),
    MixLink = require('views/components/mixLink')({}),
    TestUtils = React.addons.TestUtils;

it('is a function', function () {
    expect(MixLinkList).to.be.a(Function);
});

it('is create a MixLink for every mix', function () {

    var mixes = [
        {
            href: 'http://mixlink.com/One',
            name: "thunderbirds",
            thumbnailHref: 'someUri'
        },
        {
            href: 'http://mixlink.com/Two',
            name: "captain scarlet",
            thumbnailHref: 'someOtherUri'
        }
    ],
        renderedMixLinkList,
        renderedComponents;

    renderedMixLinkList = TestUtils.renderIntoDocument(
        <MixLinkList mixes={mixes} />
    );

    renderedComponents = TestUtils.findAllInRenderedTree(renderedMixLinkList, function (elem) {

        return TestUtils.isCompositeComponentWithType(elem, MixLink);
    });

    expect(renderedComponents.length).to.be(2);
});

});

测试当前失败。

我可以通过抓取 DOM 节点并检查实际的 HTML 来实现我的目标，这对我来说似乎很混乱，因为 MixLink 生成的 HTML 是 MixLink 类而不是 MixLinkList 类的关注点。

我想做的只是询问渲染的组件并检查它是否有两个 MixLink 类型的子组件。这可能吗？

提前致谢！

【问题讨论】：

标签： reactjs

【解决方案1】：

在大多数情况下，您的测试看起来不错。我认为它失败的原因是 MixLinkList 正在创建 它自己的 MixLink 组件 distinct 与测试中的组件。您在父类的第 2 行创建了一个 MixLink 组件，并在测试的第 3 行创建了一个不同的组件。所以渲染的列表不包含测试的MixLink的元素，而是列表自身的链接组件的元素。

您的依赖注入方法既是问题也是解决方案。只需更改父类即可开始：

module.exports = function (deps) {

var MixLink = deps.MixLink;

然后测试可以像这样注入 MixLink 组件：

var MixLink = require('views/components/mixLink')({}),
    MixLinkList = require('views/components/mixLinkList')({
        MixLink: MixLink
    }),
    TestUtils = React.addons.TestUtils;

您也可以考虑使用更具体的 TestUtils 方法，例如 scryRenderedComponentsWithType (docs)，这会使您的测试的最后一部分更容易阅读：

renderedComponents = TestUtils.scryRenderedComponentsWithType(
    renderedMixLinkList,
    MixLink
);

【讨论】：