Javascript 使用scryRenderedComponentsWithType或findRenderedComponentWithType

我试图通过使用

findenderedcomponentwithtype

和

findenderedcomponentwithtype

查找组件来进行一些单元测试。然而，我有点麻烦

我有一个浅层渲染组件

，我想在其中查找

var Layout=React.createClass({
render:function（）{
console.log（this.props）；
返回(
);
}
});
module.exports=布局；

在我的测试文件中，我尝试了以下方法：

describe('Layout', function() {
    beforeEach(function(){
        fakeDOM = TestUtils.createRenderer();
        it('should exist as a component', function(done) {
            expect(<Layout/>).to.exist;
            done();
        });
        fakeDOM.render(<Layout />);
        renderedFakeDOMOutput = fakeDOM.getRenderOutput();
    });
    it('should have login button when props.user is undefined', function(done) {
        renderedFakeDOMOutput.props.user = undefined;
        let UserMenuComponent = TestUtils.scryRenderedComponentsWithType(renderedFakeDOMOutput, UserMenu);
        done();
    });
});

description（'Layout'，function（））{
beforeach（函数（）{
fakeDOM=TestUtils.createRenderer（）；
它（'应该作为一个组件存在'，函数（完成）{
期望（）存在；
完成（）；
});
fakeDOM.render（）；
renderedFakeDOMOutput=fakeDOM.getRenderedRoutPut（）；
});
它（'未定义props.user时应具有登录按钮'，函数（完成）{
renderedFakeDOMOutput.props.user=未定义；
让UserMenuComponent=TestUtils.scryRenderedComponentsWithType（renderedFakeDOMOutput，UserMenu）；
完成（）；
});
});

但是，

scryRenderedComponentsWithType

和

findRenderedComponentWithType

找不到任何类型为

UserMenu

的组件

---

我还尝试创建另一个文件，在该文件中导出

用户菜单
组件，但我得到了相同的输出或找到了0（数组长度0），或者在没有找到组件时出错（
错误：没有找到组件类型：函数用户菜单（）
）.
我知道这不是你所问问题的直接解决方案，但当我尝试浅层渲染时，我和你一样努力解决它。React自己的文档将此功能描述为具有“某些限制”的早期版本

浅层测试目前有一些局限性，即不支持
裁判。我们将尽早发布此功能，并希望
对社区的反馈意见作出反应，了解其应如何发展

我厌倦了把头撞在墙上，于是采用了我在别处找到的更直截了当的解决方案


万一这个链接坏了：基本上，它说用你在测试中内联创建的东西替换你的子组件。这正是我所做的：

rewire-module.js（从博客文章中复制）

MyList.jsx（代码段）


{items.map（item=>）}

MyList-test.jsx（代码段）

let-rewireModule=require（'../utils/rewire-module'）；
让重新布线=需要（“重新布线”）；
让MyList=rewire（'./MyList.jsx'）；
RewiRemoModule（我的列表{
MyListItem:React.createClass({
道具类型：{
项目：React.PropTypes.object.isRequired
},
渲染：函数（）{
返回；
}
})
});
它（'应该呈现数据'，函数（）{
//初始化
MyStore.onLoadCompleted([
{id:1，名称：'test1'}，
{id:2，名称：'test2'}
]);
让listComponent=TestUtils.renderIntoDocument（）；
让listItems=TestUtils.scryRenderedDOMComponentsWithClass（listComponent，'MyListItem'）；
expect（listItems.length）.to.equal（2）；
//清理
React.unmountComponentAtNode（listComponent.getDOMNode（））；
});

正如您可能已经想到的，我基本上使用“className”作为我的元素标识符，以便以后查找它们

有时，如果我想搜索具有特定数据的特定子组件，我会在类名中构建一些独特的东西

rewireModule(MyList, {
    MyListItem: React.createClass({
        propTypes: {
            item: React.PropTypes.object.isRequired
        },
        render: function () {
            return <div className={'MyListItem_' + item.id}/>;
        }
    })
});

it('should render data', function () {
    // init
    MyStore.onLoadCompleted([
        {id: 1, name: 'Test 1'},
        {id: 2, name: 'Test 2'}
    ]);

    let listComponent = TestUtils.renderIntoDocument(<MyList/>);
    TestUtils.findRenderedDOMComponentWithClass(listComponent, 'MyListItem_1');
    TestUtils.findRenderedDOMComponentWithClass(listComponent, 'MyListItem_2');

    // cleanup
    React.unmountComponentAtNode(listComponent.getDOMNode());
});

rewireModule（MyList{
MyListItem:React.createClass({
道具类型：{
项目：React.PropTypes.object.isRequired
},
渲染：函数（）{
返回；
}
})
});
它（'应该呈现数据'，函数（）{
//初始化
MyStore.onLoadCompleted([
{id:1，名称：'test1'}，
{id:2，名称：'test2'}
]);
让listComponent=TestUtils.renderIntoDocument（）；
TestUtils.findRenderedomComponentWithClass（listComponent，“MyListItem_1”）；
TestUtils.findRenderedomComponentWithClass（listComponent，“MyListItem_2”）；
//清理
React.unmountComponentAtNode（listComponent.getDOMNode（））；
});

module.exports = function rewireModule(rewiredModule, varValues) {
    var rewiredReverts = [];

    beforeEach(function () {
        var key, value, revert;
        for (key in varValues) {
            if (varValues.hasOwnProperty(key)) {
                value = varValues[key];
                revert = rewiredModule.__set__(key, value);
                rewiredReverts.push(revert);
            }
        }
    });

    afterEach(function () {
        rewiredReverts.forEach(function (revert) {
            revert();
        });
    });

    return rewiredModule;
};

<div>
    { items.map(item => <MyListItem key={item.id} item={item}/>) }
</div>

let rewireModule = require('../utils/rewire-module');
let rewire = require('rewire');
let MyList = rewire('./MyList.jsx');

rewireModule(MyList, {
    MyListItem: React.createClass({
        propTypes: {
            item: React.PropTypes.object.isRequired
        },
        render: function () {
            return <div className="MyListItem"/>;
        }
    })
});

it('should render data', function () {
    // init
    MyStore.onLoadCompleted([
        {id: 1, name: 'Test 1'},
        {id: 2, name: 'Test 2'}
    ]);

    let listComponent = TestUtils.renderIntoDocument(<MyList/>);
    let listItems = TestUtils.scryRenderedDOMComponentsWithClass(listComponent, 'MyListItem');
    expect(listItems.length).to.equal(2);

    // cleanup
    React.unmountComponentAtNode(listComponent.getDOMNode());
});

rewireModule(MyList, {
    MyListItem: React.createClass({
        propTypes: {
            item: React.PropTypes.object.isRequired
        },
        render: function () {
            return <div className={'MyListItem_' + item.id}/>;
        }
    })
});

it('should render data', function () {
    // init
    MyStore.onLoadCompleted([
        {id: 1, name: 'Test 1'},
        {id: 2, name: 'Test 2'}
    ]);

    let listComponent = TestUtils.renderIntoDocument(<MyList/>);
    TestUtils.findRenderedDOMComponentWithClass(listComponent, 'MyListItem_1');
    TestUtils.findRenderedDOMComponentWithClass(listComponent, 'MyListItem_2');

    // cleanup
    React.unmountComponentAtNode(listComponent.getDOMNode());
});