[@theme-ui/match-media] Breaks gatsby builds due to undefined window

Using @theme-ui/match-media’s useResponsiveValue hook in Gatsby causes the build to fail, due to its use of window.matchMedia.

I’d normally add a typeof window === 'undefined' check, but am not allowed to conditionally call a hook. Is there an alternative userland solution for this that I’m not thinking of?

I could add the check to the hook - is returning breakpoints[0] a sensible default?

[joestrouth1]

@dburles The docs say:

By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file

I could not find a way to set the test environment for that test only.

Moved the test to its own file ssr.js and set the environment but @testing-library/react’s render function relies on document. None of the options it accepts helped. Tried to test the functions themselves outside of a rendered component, but the Rules of Hooks didn’t like that.

Surely someone else has needed to simulate the absence of window so I’ll keep looking for a solution.

[dburles]

@joestrouth1 PR Looks good. Try set the test environment to node for that test https://jestjs.io/docs/en/configuration.html#testenvironment-string