Estoy usando la biblioteca de pruebas de reacción y redux.

Tengo un componente que tiene un botón para enviar la acción redux para obtener una publicación y luego mostrarla en la pantalla.

 const { posts, name } = useSelector((state) => state.posts) const dispatch = useDispatch() const handleClick = useCallback(() => { dispatch(fetchPosts()) }, []) return ( <div className="App" data-test="appComponent"> <button onClick={handleClick}>get post</button> <section className="main"> <div>project name: {name}</div> <Main posts={posts} /> </section> </div> )

en el archivo de prueba, lo que quiero probar es que no hay texto cuando se carga el inicio de la página, después de hacer clic en el botón que activa la acción de envío de redux, la pantalla debería tener texto en ese momento.

 describe("App test", () => { const useSelectorMock = jest.spyOn(reactRedux, "useSelector") const useDispatchMock = jest.spyOn(reactRedux, "useDispatch") beforeEach(() => { useSelectorMock.mockClear() useDispatchMock.mockClear() }) afterEach(() => { jest.resetAllMocks() clearnup() }) it("test redux render", () => { useSelectorMock.mockReturnValue({ posts: [], }) const dummyDispatch = jest.fn() useDispatchMock.mockReturnValue(dummyDispatch) render(<App />) const post = screen.queryByText("abc") const button = screen.getByRole("button", { name: "get post", }) expect(post).toBeNull() userEvent.click(button) /* This is what I have tried. useSelectorMock.mockReturnValue({ posts: [ { title: "and I am thing2!", body: "abc", }, ], }) */ const post2 = screen.getByText("abc") expect(post2).toBeInTheDocument() })

Tengo el valor del selector simulado de inicio, por lo que la prueba de la post es null y se pasa. Sin embargo, cuando userEvent.click , no es como el clic básico de userEvent para llamar a una función y luego cambiar el renderizado. Entonces el post2 no está funcionando. Traté de cambiar useSelectorMock.mockReturnValue después de hacer clic en el botón y quiero que el valor del selector cambie al nuevo y también se represente en la pantalla. Pero no está funcionando. Solo puedo probar el valor del selector original, pero no puedo probar el nuevo actualizado.

¿Cómo puedo probar el dispatch con la react testing library ?