Testing Dispatch Actions With Jest

searchResults.test.js

import { useDispatch, StoreProvider } from "@/state/store"
import mockClient from "@/tests/mocks/mockClient"
import { UserQuery } from "@graphql/user/queries.graphql"

let r, data, dispatch

const DispatchWrapper = props => {
  dispatch = useDispatch()
  return props.children
}

const Component = props => {
  return (
    <StoreProvider>
      <DispatchWrapper>
        <SearchResultsView {...props}/>
      </DispatchWrapper>
    </StoreProvider>
  )
}

beforeAll(async () => {
  let {data} = await mockClient.query({ query: UserQuery })
  r = render(Component(data))
})

afterAll(() => {
  cleanup()
})

describe("<SearchResultsView />", () => {
  it("should display results", async () => {
    dispatch({
      type: "updateSearchString",
      payload: { queryString: "puppies" }
    })

    r.rerender(Component(data))

    const list = await waitForElement(() =>
      r.container.querySelector("#entity-list")
    )
    const results = list.querySelectorAll("li")

    expect(results.length).toBe(10)
  })
})