Storyshots does not work with useMediaQuery

Question

Lory1990 opened this issue 3 years ago · 2 comments

Hi!
I am using Storybook - Storyshots to make come tests, my components are responsive and I use some conditions like

 const isMobile = useMediaQuery({ query: `(max-width: 768px` })

in storybook the component works but when I run the storyshots test I get this error

 Cannot read property 'matches' of undefined
const isMobile = useMediaQuery({ query: `(max-width: 768px` })
                               ^

How can I solve?

I think the main problem is about the test structure

storybook.test.js

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots({
  framework: 'react',
})

Answer 1 · 2021-07-30T19:20:11.000Z

@Lory1990 Do you have a longer stacktrace?

I'm not sure how storyshots works, but based on the error I would assume it isn't rendering in a real browser - you'll need to provide a fake device as if you were doing server side rendering so that it knows what to render: https://github.com/contra/react-responsive#forcing-a-device-with-the-device-prop

Answer 2 · 2021-07-30T19:21:35.000Z

I looked and if you want it to render in a real browser (that has media queries, which this library needs) you can use https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer but you'd probably be better off using the device prop anyways so you have more control over it.