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

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：如果组件被更新为采用不同的 props(但具有相同的渲染结果)，那么即使应用程序仍在按要求工作，您的测试也会失败。如果您检查渲染的输出，那么您可以自由重构和更新，并且只有在重要内容失败时您的测试才会失败 - 即显示的链接数量不正确。Kent C Dodds 写了很多关于这类东西的文章 - 看看他的 React 测试库