Fix: gatsby SSR

__tests__/Controlled.js

@@ -15,6 +15,8 @@ test('when closed and then open', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
   expect(handleZoomChange).toHaveBeenLastCalledWith(true)
 
@@ -24,6 +26,8 @@ test('when closed and then open', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   // nothing should happen
   fireEvent.click(openTrigger)
 
@@ -40,12 +44,15 @@ test('when closed and then open', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     jest.advanceTimersByTime(300)
   })
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('when open and then closed', () => {
@@ -69,6 +76,8 @@ test('when open and then closed', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     jest.advanceTimersByTime(300)
   })
@@ -78,6 +87,8 @@ test('when open and then closed', () => {
 
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
 })
 
 test('sends unzoom message when ESC key pressed', () => {
@@ -148,6 +159,7 @@ test('custom open/close text', () => {
 
   const openTrigger = getByLabelText('Open me')
   expect(openTrigger).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   rerender(
     <ControlledZoom
@@ -162,4 +174,6 @@ test('custom open/close text', () => {
 
   const closeTrigger = getByLabelText('Close me')
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
 })

__tests__/ControlledActivated.test.js

@@ -0,0 +1,27 @@
+import React, { createRef } from 'react'
+import { render } from '@testing-library/react'
+import ControlledActivated from '../source/UncontrolledActivated'
+
+test('returns null when no portalEl', async () => {
+  const { container } = render(
+    <ControlledActivated
+      closeText="Unzoom image"
+      isActive={true}
+      onLoad={jest.fn()}
+      onUnload={jest.fn()}
+      onZoomChange={jest.fn()}
+      overlayBgColorEnd="rgba(255, 255, 255, 0.95)"
+      overlayBgColorStart="rgba(255, 255, 255, 0)"
+      parentRef={createRef(null)}
+      portalEl={undefined}
+      scrollableEl={null}
+      transitionDuration={300}
+      zoomMargin={0}
+      zoomZindex={2147483647}
+    >
+      <img alt="foo" src="foo.jpg" width="500" />
+    </ControlledActivated>
+  )
+
+  expect(container).toMatchSnapshot()
+})

__tests__/Uncontrolled.js

@@ -12,8 +12,9 @@ test('is accessible with defaults & <img />', async () => {
     </main>
   )
   const openTrigger = getByLabelText('Zoom image')
-
   expect(openTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 
   fireEvent.click(openTrigger)
@@ -22,8 +23,9 @@ test('is accessible with defaults & <img />', async () => {
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Unzoom image')
-
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 })
 
@@ -43,8 +45,9 @@ test('is accessible with custom open/close text & <img />', async () => {
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Close me')
-
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 })
 
@@ -59,12 +62,15 @@ test('zooms/unzooms with defaults & <img />', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Unzoom image')
   const modal = getByRole('dialog')
 
   expect(closeTrigger).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(closeTrigger)
 
@@ -74,6 +80,7 @@ test('zooms/unzooms with defaults & <img />', () => {
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('zooms/unzooms with custom open/close text & <img />', async () => {
@@ -94,6 +101,7 @@ test('zooms/unzooms with custom open/close text & <img />', async () => {
 
   expect(closeTrigger).toBeVisible()
   expect(modal).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(closeTrigger)
 
@@ -103,6 +111,7 @@ test('zooms/unzooms with custom open/close text & <img />', async () => {
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('unzooms using ESC key', () => {
@@ -120,6 +129,8 @@ test('unzooms using ESC key', () => {
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   // should do nothing
   fireEvent.keyDown(document, { key: 'ArrowLeft' })
 
@@ -128,6 +139,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.keyDown(document, { key: 'Escape' })
 
@@ -136,6 +148,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(openTrigger)
   expect(modal).toBeVisible()
@@ -147,6 +160,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('unzooms on scroll', () => {
@@ -164,6 +178,8 @@ test('unzooms on scroll', () => {
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     window.dispatchEvent(new Event('scroll', {}))
   })
@@ -175,6 +191,7 @@ test('unzooms on scroll', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('passes on original transform style', () => {
@@ -188,6 +205,8 @@ test('passes on original transform style', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
@@ -198,4 +217,6 @@ test('passes on original transform style', () => {
 
   const wrapEl = modal.querySelector('.content')
   expect(wrapEl.style.transform).toContain('rotate(45deg)')
+
+  expect(document.body).toMatchSnapshot()
 })

__tests__/UncontrolledActivated.test.js

@@ -0,0 +1,25 @@
+import React, { createRef } from 'react'
+import { render } from '@testing-library/react'
+import UncontrolledActivated from '../source/UncontrolledActivated'
+
+test('returns null when no portalEl', async () => {
+  const { container } = render(
+    <UncontrolledActivated
+      closeText="Unzoom image"
+      onLoad={jest.fn()}
+      onUnload={jest.fn()}
+      overlayBgColorEnd="rgba(255, 255, 255, 0.95)"
+      overlayBgColorStart="rgba(255, 255, 255, 0)"
+      parentRef={createRef(null)}
+      portalEl={undefined}
+      scrollableEl={null}
+      transitionDuration={300}
+      zoomMargin={0}
+      zoomZindex={2147483647}
+    >
+      <img alt="foo" src="foo.jpg" width="500" />
+    </UncontrolledActivated>
+  )
+
+  expect(container).toMatchSnapshot()
+})