时间戳

首页 > 解决方案 > 我们如何访问和获取传递给组件的 props (wrapper.props().propname) 总是返回 undefined

reactjs - 我们如何访问和获取传递给组件的 props (wrapper.props().propname) 总是返回 undefined

问题描述

我正在使用酶测试列表组件我想测试我的组件是否呈现具有相同数据的列表，该数据传递给道具中的组件

import React from 'react';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { MemoryRouter } from 'react-router';

import ListComponent from '.';

const listOfLinks = [
    { url: '/one', text: 'Link one', internal: false },
    { url: '/two', text: 'Link two', internal: false },
    { url: '/datasets', text: 'Datasets', internal: true }
];

const itemsToDisplay = 4;

const props = {
    listOfLinks, itemsToDisplay
};

describe('list-Component', () => {
    it('Check if rendered list size is same as passed', () => {
        const wrapper = mount(<MemoryRouter><ListComponent {...props} /></MemoryRouter>);
        expect(wrapper.props().listOfLinks.length).toEqual(3);
    });
});

但我收到 了 3 个预期：未定义

标签： reactjsenzyme

解决方案

您的包装器是 a MemoryRouter，而不是ListComponent. MemoryRouter没有道具。

如果你想检查传递给的道具ListComponent，你可以这样做：

wrapper.find(ListComponent).props()

但是，顺便说一句……如果你这样做，你会测试什么？在这种情况下，您的测试正确地提供了预期的道具，但与组件本身无关。像这样检查道具是检查实现细节，而您应该对渲染输出感兴趣。最好在包装器中找到实际链接，然后计算它们。

eta：如果组件被更新为采用不同的道具（但具有相同的渲染结果），那么您的测试将失败，即使应用程序仍在按要求工作。如果您检查呈现的输出，那么您可以自由地重构和更新，并且您的测试只会在重要的东西失败时失败 - 即显示的链接数量不正确。Kent C Dodds写了很多关于这类东西的文章——查看他的React 测试库

推荐阅读