Tengo un componente funcional que muestra algo que se envió a la tienda redux. En Jest estoy tratando de usar la misma implementación (reductores) en las pruebas que estoy usando en la aplicación. Mi prueba se ve así:

 import { render, screen } from '@testing-library/react'; import { Provider } from 'react-redux'; // eslint-disable-next-line import/no-extraneous-dependencies import { applyMiddleware, createStore } from 'redux'; import ReduxThunk from 'redux-thunk'; import reducer from '../../utils/reducers'; import { initialState } from '../../index'; import Paragraph from '../../components/document/paragraph/Paragraph'; const author = () => ({ id: '5bbab532-e546-4cf6-957a-823948baa416', name: 'Unknown', image: null, }); const paragraph = () => ({ id: '5bbab532-e546-4cf6-957a-823948baa417', ordinal: 1, content: '', author: author(), }); const mockStore = () => { const unknown = author(); // eslint-disable-next-line max-len const s = createStore(reducer, initialState(unknown.id, unknown.name, unknown.image), applyMiddleware(ReduxThunk)); console.log(s.getState()); return s; }; let store; describe('Test paragraph', () => { beforeEach(() => { store = mockStore(); }); it('Is rendered', () => { const p = paragraph(); store.dispatch({ type: 'ADD_PARAGRAPH', p }); render( <Provider store={store}> <Paragraph id={p.id} /> </Provider>, ); expect(screen.getByText(/author/i)).toBeInTheDocument(); expect(screen.getByText(/locked-by/i)).toBeInTheDocument(); }); });

La tienda se ve así antes de dársela al proveedor:

 { isAuthenticated: false, author: { id: '5bbab532-e546-4cf6-957a-823948baa416', name: 'Unknown', image: null }, otherAuthors: [], paragraphs: [ undefined ], messages: [ 'ADD_PARAGRAPH' ], error: { isPresent: false, message: '' } }

Debido a los paragraphs: [ undefined ] me sale este error en el componente a probar: const paragraph = useSelector((state) => state.paragraphs.find((p) => id === p.id)); . ¿Por qué no está definido y cómo puedo solucionarlo?