How do I have two tests in the same file with PollyJS and Jest?

Viewed 55

I'm having a strange issue with PolyJS and Jest. I have 2 tests in a single file -- the first one passes, and the second returns an error from the fetch in MyComponent: TypeError: Cannot read property 'status' of undefined"

It doesn't matter which one is second. Standalone each test passes, but together the second fails so it looks like Polly is just not doing the fetch from it's recordings.

I've tried various things like context.polly.flush() in afterEach but it doesn't seem to work. Any ideas?

Polly config:

export const setupDefaultPolly = () => {
  const context = setupPolly({
    mode: process.env.POLLY_MODE,
    adapters: [require('@pollyjs/adapter-node-http')],
    persister: require('@pollyjs/persister-fs'),
    persisterOptions: {
      fs: {
        recordingsDir: path.resolve(__dirname, '../__recordings__'),
      },
    },
  })
  return context

My test file:

describe('MyComponent', () => {
  setupDefaultPolly()

  it('should render correctly', async () => {
    const fetchSpy = jest.spyOn(global, 'fetch')    
    let wrapper
    
    await act(async () => {
      wrapper = mount(<MyComponent thing="exists" />)
    })

    expectLoadingPage(wrapper).toBeTruthy()
    await waitFor(() => {
      wrapper.update()
      expectLoadingPage(wrapper).toBeFalsy()
    })

    expect(wrapper.text()).toContain('exists')
    expect(withoutMuiID(wrapper)).toMatchSnapshot()
    expect(fetchSpy).toHaveBeenCalledTimes(3)
  })

  it('should display error when not found', async () => {
    let wrapper
    await act(async () => {
      wrapper = mount(<MyComponent thing="not-exists" />)
    })

    expectLoadingPage(wrapper).toBeTruthy()

    await waitFor(() => {
      wrapper.update()
      expectLoadingPage(wrapper).toBeFalsy()
    })

    expect(wrapper.text()).toContain('Not found: not-exists')
    expect(withoutMuiID(wrapper)).toMatchSnapshot()
  })
})
0 Answers
Related