Testing with usePageLoadingContext

[jvanbaarsen]

I was wondering if it makes sense to create some form of helper or something to easily mock out the usePageLoadingContext. I'm now doing it this way:

import { render, screen } from '@redwoodjs/testing'
import { usePageLoadingContext } from '@redwoodjs/router'
import PageLoader from './PageLoader'

jest.mock('@redwoodjs/router')

describe('PageLoader', () => {
  it('renders a loading block when usePageLoadingContext returns true', () => {
    usePageLoadingContext.mockReturnValueOnce({ loading: true })
    render(<PageLoader />)
    expect(screen.getByText('Loading')).toBeInTheDocument()
  })

  it('doesnt render anything when usePageLoadingContext returns false', () => {
    usePageLoadingContext.mockReturnValueOnce({ loading: false })
    render(<PageLoader />)
    expect(screen.queryByText('Loading')).not.toBeInTheDocument()
  })
})

But it feels super tedious having to do this in every test for every component that uses the PageLoader component.

There is a good chance that I'm not doing things the way that Jest/React Testing Library thinks it should be done

[thedavidprice]

Hi @jvanbaarsen Sorry this one's gone without a reply for so long!

We've been focusing on this kind of test + mock at the Cell level -- have you seen the boilerplate test and mock files that come with a generated Cell component?

If that doesn't fit your use case, let's definitely explore this further.

[jvanbaarsen]

@thedavidprice I'll check that! I'm not sure if something on a Cell level would be good enough, since I'm using the usePageLoading in a layout. I was under the impression that cells were meant for loading GraphQL data. Or am I missing something?

[thedavidprice]

...since I'm using the usePageLoading in a layout. I was under the impression that cells were meant for loading GraphQL data. Or am I missing something?

^^ No, you're not missing anything. Correct and Cells == data. Wasn't sure about your use case.

@dac09 has quite a bit of experience handling loading UX for his app Tape.sh. Any thoughts/suggestion about this, Danny?

[dac09]

I've not done this specifically, but a good idea might be to use beforeEach and mock it there to be true, that way you don't have to repeat yourself in every test :)

Also, is there a reason to test for the page loader every time?

[jvanbaarsen]

@dac09 No, I don't really wanna test it every time, I'd be fine with testing it just once in the test for the actual Page component. But since React Testing Library (RTL) does a full render of all the components in the tree the layout gets rendered in every test, even the ones that are not about the Layout. So all components that are wrapped inside the page. That way RTL throws an error every time I'm not mocking the context.

[jtoar]

Also, is there a reason to test for the page loader every time?

@jvanbaarsen I'm also wondering this; it feels like testing usePageLoadingContext should be on us as a framework not you. This looks like a test that we should have:

describe('PageLoader', () => {
  it('renders a loading block when usePageLoadingContext returns true', () => {
    // ...

[jvanbaarsen]

@jtoar Yeah I'm fine with considering this an "implementation detail". But that still means I currently would need to mock it out in every test that comes by the context.

It would be great if out of the box Redwood would mock this call (A bit the same as we do with mockCurrentUser)