如何在 Jasmine 中使用 React 测试工具答案

【问题标题】：How to use React Test Utilities with Jasmine如何在 Jasmine 中使用 React 测试工具
【发布时间】：2014-03-30 12:53:09
【问题描述】：

我用 React 的测试工具编写了单元测试代码。但是遇到了问题

我的环境是：

导轨 4
茉莉花2.0.0
主干 1.1.2

describe("cNotice", function () {
    it("lol", function () {
        console.log(Notice); // present
        console.log(<Notice message="show me the message" />); // return Constructor

        var instance = <Notice message="show me the message" />;
        var component = React.addons.TestUtils.renderIntoDocument(instance);
        expect(component.getDOMNode().childNodes[0].className).toBe('notice');
    });
});

错误信息是：

错误：Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。这通常意味着您正在尝试将 ref 添加到没有所有者的组件（即不是在另一个组件的 render 方法中创建的）。尝试在一个新的顶级组件中渲染这个组件，该组件将保存 ref。

更新

这段代码没问题：

describe("cNotice", function () {
    var Notice = null;
    beforeEach(function () { Notice = React.createClass({...}); });

    it("lol", function () {
        var instance = <Notice message="show me the message" />;
        var component = React.addons.TestUtils.renderIntoDocument(instance);
        expect(component.getDOMNode().childNodes[0].className).toBe('notice');
    });
});

但我想从外部文件导入通知组件。

【问题讨论】：

标签： backbone.js jasmine reactjs

【解决方案1】：

已解决

我使用了窗口命名空间。
从外部文件导入通知组件

describe("cNotice", function () {
    it("lol", function () {
        var component = React.addons.TestUtils.renderIntoDocument(window.Notice({ message: "show me the message" }));
        expect(component.getDOMNode().childNodes[0].className).toBe('notice');
    });
});

【讨论】：