如何使用 isRequired 道具和 onclick 测试渲染或不渲染的子组件

Question

这是MasterView.jsx

function MasterView(props) {
    return (
        <FilterCard title="Pass" onClick={() =>setFilter([{ id: PASSED}])}/>
        <FilterCard title="fail" onClick={() =>setFilter([{ id: Failed}])}/>
   )
}

这是MasterViewSpec.jsx

describe('<MasterView />', () => {  
    test('renders Child component', () => {
        const history = createMemoryHistory('/dashboard')
        const wrapper = mount(<MasterView history={history} />);
        expect(wrapper.find(<FilterCard title="Passed" onClick={() => setActiveFilters([{ id: 'passed' }])} />).length).toEqual(1);
    });
});

遇到以下问题 -

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

Expected: 1
Received: undefined

Answer 1

来自酶mount documentation：

注意：与浅层或静态渲染不同，完全渲染实际上是将组件安装在 DOM 中，[...]

来自shallow documentation：

浅渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。

因此，如果您要查找FilterCard，则必须使用shallow 而不是mount。

您还以错误的方式使用了.find() 方法。您必须使用 enzyme selector 作为参数。所以你的测试代码应该是这样的：

describe('<MasterView />', () => {  
    test('renders Child component', () => {
        const history = createMemoryHistory('/dashboard')
        const wrapper = shallow(<MasterView history={history} />);
        expect(wrapper.find(FilterCard).length).toEqual(1);
    });
});

如果你想测试一个特定的prop 是否被传递给一个子组件，你应该这样做：

describe('<MasterView />', () => {  
    test('renders Child component', () => {
        const history = createMemoryHistory('/dashboard')
        const wrapper = shallow(<MasterView history={history} />);
        const childTitle = wrapper.find(FilterCard).at(0).props().title;
        expect(childTitle).toEqual("Passed");
    });
});

如果您想按组件构造函数及其属性查找，可以使用 FilterCard[title="Passed"] 之类的选择器。

describe('<MasterView />', () => {  
    test('renders Child component', () => {
        const history = createMemoryHistory('/dashboard')
        const wrapper = shallow(<MasterView history={history} />);
        expect(wrapper.find(FilterCard[title="Passed"]).length).toEqual(1);
    });
});

来自documentation：

React 组件名称和道具（Button、Button[type="submit"] 等） - 但是，请注意，强烈建议通过组件构造函数/函数而不是显示名称来查找。强>

我的亮点。