Question

我正在用酶测试列表组件，我想测试我的组件是否使用传递给props中组件的相同数据渲染列表

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项：未定义

Answer 1

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

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

wrapper.find(ListComponent).props()

但是，顺便说一句...如果这样做，您将测试什么？在这种情况下，可能是您的测试正确提供了预期的道具，但组件本身什么也没有。当您应该对呈现的输出感兴趣时，检查道具就是检查实现细节。最好在包装器中找到实际的链接本身，然后对其进行计数。

eta：如果组件已更新为采用不同的道具（但具有相同的渲染结果），则即使应用程序仍按要求运行，您的测试也会失败。如果您检查渲染的输出，则可以自由重构和更新，并且只有在重要内容失败时测试才会失败-即显示的链接数量不正确。 Kent C Dodds写了很多关于这种东西的书-看看他的React Testing Library

我们如何访问和获取传递到组件的道具（wrapper.props（）。propname）始终返回未定义

1 个答案: