如何在 Enzyme 中编写测试以检查连接/智能组件是否存在？

Question

I have the following component:

import React from 'react';
import {
  Header
} from 'semantic-ui-react';
import SummaryTable from '../SummaryTable/SummaryTable';
import SummaryFilters from '../SummaryFilters/SummaryFilters';

function TabSummary() {
  return (
    <>
      <Header as="h2">
        Blah blah
      </Header>
      <SummaryFilters />
      <SummaryTable />
    </>
  );
}

export default TabSummary;

How can I write a test for this component to check if the SummaryFilter component exists. SummaryFilter is a connected/smart component and the following test:

it('should display <SummaryFilters /> when page is first loaded', () => {
  console.log(wrapper.debug());
  expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();
});

throws the following error:

Invariant Violation: Could not find "store" in the context of "Connect(SummaryFilters)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(SummaryFilters) in connect options.

What do I need to add/change to run this test successfully?

Appreciate any guidance

Answer 1

Changing expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();

to:

expect(wrapper.find('Connect(SummaryFilters)').exists()).toBeTruthy();

resolved the error and made the test work as expected.