CookieProvider not re-rendering component with jest and react-testing-library

[brandonweiss]

I implemented one of those GDPR cookie banners. When you click a button it dismisses the banner and sets a cookie so we know not to show it again.

Here’s the code (I’ve simplified it a bit for clarity):

const CookieConsent = () => {
  const [cookies, setCookie] = useCookies([storageKey])
  const value = typeof cookies[storageKey] === "undefined" ? null : cookies[storageKey]
  const dismissed = JSON.parse(value)

  const dismiss = () => {
    setCookie(storageKey, true)
  }

  if (dismissed) {
    return null
  }

  return <>
    <Message>{text}</Message>

    <Button onClick={dismiss}>OK</Button>
  </>
}

This all works when testing manually, but for some reason it doesn’t seem to work when I write an automated test for it.

test("hidden after being dismissed", () => {
  let { queryByText, getByText } = render(
    <CookiesProvider>
      <CookieConsent />
    </CookiesProvider>
  )

  fireEvent.click(getByText("OK"))

  expect(queryByText(text)).not.toBeInTheDocument()
})

As best I can tell, when setCookie is called in the click handler, it’s not re-rendering the component.

Is there something I’m doing wrong or is this a bug?

[stevenmusumeche]

I am having the same issue with jest and RTL.

[stevenmusumeche]

This comment on a different issue solved it for me: #113 (comment)

[eXon]

In v4.0.1, it should detect JSDOM and skip the browser. Can you confirm it now work?

[brandonweiss]

@eXon Thanks! Hmm, it doesn’t seem to be fixed for me…

[mocantimoteidavid]

For me too, the solution from the issue above doesn't work with typescript.

[stevenmusumeche]

@mocantimoteidavid this is a good place for @ts-ignore, IMO

[eXon]

Should be fixed on the next version

[eXon]

Released with v4.0.3