时间戳

首页 > 解决方案 > 道具没有传递给测试用例

reactjs - 道具没有传递给测试用例

问题描述

我有一个简单的组件，但无法为我的测试用例传递道具，如果没有 - withRouter，它工作得很好。可能是什么原因

零件

const Plugins = ({pluginsData, history}) => {

    return (
        <ul className="plugin-list">
            <li
                appearance="subtle"
                weight="medium"
                className="item"
                onClick={() => history.push(`/list/plugins`)}>Plugins</li>
                {  pluginsData.length
                ? pluginsData.map((item, index) => <li className="up-coming-text" key={index}>{item.plugin}</li>)
                : " No Data" }
        </ul>
    )
}

使用Router（插件）导出默认值

plugin.test.js

  const pluginsData= [
        {
            "plugin": "Apps (Coming soon)"
        }
    ]

   
const wrapper = shallow(<Plugins pluginsData={pluginsData}/>);

describe('test home page', () => {

    it('should render home page successfully', () => {
        expect(wrapper).toMatchSnapshot();
    });

    it('renders correct text in item', () => {
        expect(wrapper.find('.up-coming-text').get(0).props.children).toEqual('Apps (Coming soon)');
    });

    it('renders pluginsData length', () => {
        expect(wrapper.find('.up-coming-text')).toBeDefined();
        expect(wrapper.find('.up-coming-text').length).toEqual(pluginsData.length);
    });

});

错误

ΓùÅ 测试主页 ΓÇ║ 渲染插件数据长度

expect(received).toEqual(expected) // deep equality

Expected: 1
Received: 0

  28 |     it('renders pluginsData length', () => {
  29 |         expect(wrapper.find('.up-coming-text')).toBeDefined();
> 30 |         expect(wrapper.find('.up-coming-text').length).toEqual(pluginsData.length);
     |                                                        ^
  31 |     });
  32 |
  33 | });

  at Object.<anonymous> (ui/src/routes/Explorer/Plugins/plugins.test.js:30:56)

标签： reactjsjestjsenzyme

解决方案

您可以使用Component.WrappedComponent 单独测试组件。

从文档中，

包装的组件作为返回组件上的静态属性公开WrappedComponent，除其他外，可用于单独测试组件。

shallow(<Plugins.WrappedComponent pluginsData={pluginsData}/>)

推荐阅读