[Solved]-How to test if a prop is rendered correctly in a Component using Jest and Enzyme in React-Reactjs

we can use the themeProvider of styled-componnets to create a wrapper around the shallow or mount methods of enzyme, like below:

import { ThemeProvider } from 'styled-components';

const mountWithTheme = (children, theme={}, options = {}) => {
 const wrapper = mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options);
 return wrapper.mount({});
};

test("header text is being passed through correctly", () => {
  const wrapper =  mountWithTheme(<Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" />,
{ secondary: { blue: 'blue' } }); 
// we passed the theme we want as an argument to the mountWithTheme method
  expect(wrapper.find(HeaderText).text()).toEqual("Service");
});

It will be better to pull out the utils mountWithTheme and ShallowWithTheme to a different file so that it can be reused, and also as a suggestion, you can create a mockTheme file which contains some default themes which can be passed to these wrappers instead of manually passing the theme each time we are consuming these utils.

More more information, visit below link: https://github.com/styled-components/styled-components/issues/1319

to get ride of add theme as props in your wrapper

<Product items={data} theme={{secondary: {blue: ''}}} headerText="Service" paginationSize="5" noItemMessage="No results found" />

or mock it

import { createSpy } from 'expect'; const theme = createSpy(); <Product items={data} theme={theme} headerText="Service" paginationSize="5" noItemMessage="No results found" />