Ref issues with jest snapshot testing

GR34SE commented 4 years ago

I'm using storybook's storyshots addon to run jest snapshot tests in my app.

I have an issue with refs during my test runtime, it's definitely related to: https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

shiitake/dist/index.js:91 -> testChildrenEl ref is null

var contentHeight = testChildrenEl.current.offsetHeight;

Stack trace:

    TypeError: Cannot read property 'offsetHeight' of null

      at checkHeight (node_modules/shiitake/dist/index.js:91:48)
      at node_modules/shiitake/dist/index.js:152:7
      at commitHookEffectListMount (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10345:26)
      at commitPassiveHookEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10383:11)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9972:14)

shiitake version: 3.0.2

Could you help with creating node mock for this case?

bsidelinger912 commented 4 years ago

Hey @GR34SE, I'm a little surprised that this is an issue. If you're using storyshots I assume then you're rendering the component with storybook in a separate process then using story shots to load that in a headless browser and take a screenshot? Is that correct? Or are you using something like Enzyme shallow rendering?

GR34SE commented 4 years ago

Hey, sorry for delayed response

story shots to load that in a headless browser

no, storyshots takes rendered dom nodes snapshot which is then checked if the structure has changed. The issue isn't related directly to storyshots, but to renderer whick lacks ref at runtime. This ref can be mocked

bsidelinger912 / shiitake

Ref issues with jest snapshot testing #44