component-store.js:
import { create } from 'zustand';
export const componentStore = create((set) => ({
ITEMS_PER_PAGE: 5,
currentNoOfItems: 5,
totalItem: '',
showMoreItems: (totalItem) => {
set((state) => {
if (state.currentNoOfItems < totalItem) {
return {
currentNoOfItems: state.currentNoOfItems + state.ITEMS_PER_PAGE,
};
} else {
return { currentNoOfItems: state.ITEMS_PER_PAGE };
}
});
},
setTotalItem: (value) => set(() => ({ totalItem: value })),
}));
Table.js: const { ITEMS_PER_PAGE,currentNoOfItems,totalItem } = componentStore();
want to mock this in the testing file to avoid the error
TestingLibraryElementError: Unable to find an element with the text: nation. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div />
</body>
and the testing code is:
Home.test.jsx:
import { render,screen } from '@testing-library/react';
import CustomTable from '@/components/UI/Table/Table';
const mockProps = {...has data}
test('renders table headers correctly', () => {
render(<CustomTable {...mockProps} />);
screen.debug();
const text = screen.getByText("nation")
expect(text).toBeInTheDocument()
});
Anyone help me to mock this store to avoid the error
I want the store to be mocked correctly so that I can use the values to be passed to the component and get the test passed
Need help from someone!