Sorry i'm new to unit testing and i'm stuck on this.

I'm just testing the onClick of a "Show more" button.

Total size = 16 items, Page size = 15 items

so if I clicked the button, it should add 1 item to the currentResult

test('Show more button click works successfully', () => {
const state = {
search: {
  ...initialState.search,
  mainResult: SearchData.test.large,
  currentResult: SearchData.test.large.slice(0, 15),
  currentCount: 15,
  currentTotal: 16,
},
};

store = mockStore(state);
const { getByTestId } = render(
<Provider store={store}>
  <SearchListing {...props} />
 </Provider>
);
const showMoreBtn = getByTestId('search-listing-result-footer-btn');

expect(getByTestId('search-listing-result-footer-label')).toHaveTextContent('Showing 15 of 16 results');

userEvent.click(showMoreBtn);

expect(getByTestId('search-listing-result-footer-label')).toHaveTextContent('Showing 16 of 16 results');
});

Show more function, I'm chunking the mainResult so if I click the show more, I'll just add the next chunk to currentResult.

 const showMore = () => {
const newPageCount = pageCount + 1;
const newResult = [...currentResult, ...resultsChunk[newPageCount]];
dispatch(searchActions.showMore({ currentResult: newResult, currentCount: newResult.length }));
setPageCount(newPageCount);
};

Error message:

Expected element to have text content:
  Showing 16 of 16 results
Received:
  Showing 15 of 16 results

How can I update the mockStore after onClick? or is there any other way.