I’m testing with Jest an Ionic-React-Redux (-toolkit) app.

I run the test with the recommended command:

 "test.unit": "vitest"

This is the App.test.tsx created by default that doesn’t fail:

import { render } from '@testing-library/react';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

test('renders without crashing', () => {
  const { baseElement } = render(
    <Provider store={store}>
      <App />
    </Provider>
  );
  expect(baseElement).toBeDefined();
});

And mine is pretty simple also:

import { screen } from '@testing-library/react';
import PayslipsList from './PayslipsList';
import { renderWithProviders } from '../../utils/utils-for-tests';
import { fetchedPayslips } from '../../mocks/payslips';
import { fetchedPayslip } from '../../mocks/payslip';

const mockState = {
  payslipsStore: {
    payslips: { list: fetchedPayslips, loading: false, error: null },
    activePayslip: { active: fetchedPayslip, loading: false, error: null },
  },
};

test('renders without crashing', () => {
  renderWithProviders(<PayslipsList />, { preloadedState: mockState });
  expect(screen.getByText('My Payslips')).toBeInTheDocument();
});

but I got this error:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: Cannot read properties of undefined (reading 'includes')
 ❯ addStyle node_modules/@stencil/core/internal/client/index.js:691:104
 ❯ attachStyles node_modules/@stencil/core/internal/client/index.js:702:20
 ❯ updateComponent node_modules/@stencil/core/internal/client/index.js:1500:5
 ❯ node_modules/@stencil/core/internal/client/index.js:1490:38
 ❯ enqueue node_modules/@stencil/core/internal/client/index.js:1492:88
 ❯ dispatchHooks node_modules/@stencil/core/internal/client/index.js:1490:10
 ❯ Array.dispatch node_modules/@stencil/core/internal/client/index.js:1454:26
 ❯ consume node_modules/@stencil/core/internal/client/index.js:3018:16
 ❯ flush node_modules/@stencil/core/internal/client/index.js:3060:5
 ❯ invokeTheCallbackFunction node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26

This error originated in "src/pages/PayslipsList/PayslipsList.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.