fix tests

src/components/atoms/Vcard.jsx

@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react'
-import { StaticQuery, graphql } from 'gatsby'
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import saveAs from 'file-saver'
 import vCard from 'vcf'
 
@@ -31,33 +31,24 @@ const query = graphql`
   }
 `
 
-export default class Vcard extends PureComponent {
-  render() {
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const meta = data.metaYaml
+export default function Vcard() {
+  const { metaYaml } = useStaticQuery(query)
 
   const handleAddressbookClick = e => {
     e.preventDefault()
-            init(meta)
+    init(metaYaml)
   }
 
   return (
     <a
       // href is kinda fake, only there for usability
       // so user knows what to expect when hovering the link before clicking
-              href={meta.addressbook}
+      href={metaYaml.addressbook}
       onClick={handleAddressbookClick}
     >
       Add to addressbook
     </a>
   )
-        }}
-      />
-    )
-  }
 }
 
 export const init = async meta => {

src/components/atoms/Vcard.test.jsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import { render, fireEvent, waitForElement } from '@testing-library/react'
-import { StaticQuery } from 'gatsby'
+import { useStaticQuery } from 'gatsby'
 import Vcard, { constructVcard, toDataURL, init } from './Vcard'
 import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Vcard', () => {
   beforeEach(() => {
-    StaticQuery.mockImplementationOnce(({ render }) => render({ ...data }))
+    useStaticQuery.mockImplementationOnce(() => {
+      return {
+        ...data
+      }
+    })
 
     global.URL.createObjectURL = jest.fn()
   })

src/components/molecules/LogoUnit.jsx

@@ -21,8 +21,8 @@ LogoUnit.propTypes = {
 
 export default function LogoUnit({ minimal }) {
   const data = useStaticQuery(query)
-  const Animation = posed.div(moveInBottom)
   const { title, tagline } = data.metaYaml
+  const Animation = posed.div(moveInBottom)
 
   return (
     <Animation>

src/components/molecules/LogoUnit.test.jsx

@@ -1,11 +1,15 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { StaticQuery } from 'gatsby'
+import { useStaticQuery } from 'gatsby'
 import LogoUnit from './LogoUnit'
 import data from '../../../jest/__fixtures__/meta.json'
 
 beforeEach(() => {
-  StaticQuery.mockImplementationOnce(({ render }) => render({ ...data }))
+  useStaticQuery.mockImplementationOnce(() => {
+    return {
+      ...data
+    }
+  })
 })
 
 describe('LogoUnit', () => {
@@ -26,8 +30,6 @@ describe('LogoUnit', () => {
     const { container } = render(<LogoUnit minimal={true} />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(container.querySelector('.logounit').className).toMatch(
-      /logounit minimal/
-    )
+    expect(container.querySelector('.minimal')).toBeInTheDocument()
   })
 })

src/components/molecules/Networks.test.jsx

@@ -5,7 +5,11 @@ import Networks from './Networks'
 import data from '../../../jest/__fixtures__/meta.json'
 
 beforeEach(() => {
-  useStaticQuery.mockImplementationOnce(() => ({ ...data }))
+  useStaticQuery.mockImplementationOnce(() => {
+    return {
+      ...data
+    }
+  })
 })
 
 describe('Networks', () => {
@@ -26,7 +30,7 @@ describe('Networks', () => {
     const { container } = render(<Networks small={true} />)
 
     expect(container.firstChild).toBeInTheDocument()
-    expect(container.firstChild.className).toMatch(/networks small/)
+    expect(container.querySelector('.small')).toBeInTheDocument()
   })
 
   it('can be hidden', () => {

src/components/organisms/Footer.jsx

@@ -52,10 +52,8 @@ FooterMarkup.propTypes = {
 }
 
 export default function Footer() {
-  const data = useStaticQuery(query)
-  const pkg = data.portfolioJson
-  const meta = data.metaYaml
+  const { metaYaml, portfolioJson } = useStaticQuery(query)
   const year = new Date().getFullYear()
 
-  return <FooterMarkup year={year} pkg={pkg} meta={meta} />
+  return <FooterMarkup year={year} pkg={portfolioJson} meta={metaYaml} />
 }

src/components/organisms/Footer.test.jsx

@@ -1,18 +1,17 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { StaticQuery, useStaticQuery } from 'gatsby'
+import { useStaticQuery } from 'gatsby'
 import Footer from './Footer'
 import data from '../../../jest/__fixtures__/meta.json'
 
-describe('Header', () => {
+describe('Footer', () => {
   beforeEach(() => {
-    StaticQuery.mockImplementation(({ render }) =>
-      render({
+    useStaticQuery.mockImplementation(() => {
+      return {
         ...data,
         portfolioJson: { bugs: '' }
+      }
     })
-    )
-    useStaticQuery.mockImplementation(() => ({ ...data }))
   })
 
   it('renders correctly', () => {

src/components/organisms/Header.test.jsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { StaticQuery, useStaticQuery } from 'gatsby'
+import { useStaticQuery } from 'gatsby'
 import Header from './Header'
 import Context from '../../store/createContext'
 import data from '../../../jest/__fixtures__/meta.json'
 
 describe('Header', () => {
   beforeEach(() => {
-    StaticQuery.mockImplementation(({ render }) => render({ ...data }))
-    useStaticQuery.mockImplementation(() => ({ ...data }))
+    useStaticQuery.mockImplementation(() => {
+      return {
+        ...data
+      }
+    })
   })
 
   it('renders correctly', () => {