Как проверить страницу gatsby, содержащую компоненты с несколькими запросами stati c? - PullRequest
Новая
       3

Как проверить страницу gatsby, содержащую компоненты с несколькими запросами stati c?

0 голосов
/ 26 марта 2020

Я смотрю тесты для моего сайта Gatsby, где у меня есть компонент домашней страницы. Который отображает макет и сам контент домашней страницы. Сам по себе макет отображает нижний колонтитул и заголовок.

Макет использует запрос stati c для имени сайта, а нижний колонтитул и заголовок используют запросы stati c для содержимого нижнего колонтитула и структуры меню заголовка.

В настоящее время я могу только смоделировать один из запросов stati c, как показано в примере ниже. Как я могу смоделировать все эти три запроса c? И каков наилучший метод / лучший способ для насмешки над всеми этими тремя запросами c?

Мой текущий тест выглядит следующим образом: 

import React from "react"
import renderer from "react-test-renderer"
import { useStaticQuery } from "gatsby"

import Homepage from "../src/pages/index"

beforeEach(() => {
    useStaticQuery.mockImplementationOnce(() => ({
      "site": {
        "siteMetadata": {
          "title": "Test title"
        }
      }
    }))
})  


describe("Homepage", () => {
  it("renders correctly", () => {
    const data = {
      "homePageData": {
        "edges": [{
          "node": {
            "frontmatter": {
              "title": "This is the title",
              "description": "Test description",
              "techstack": [{"label": "C#"}],
            }
          }
        }]
      }
    }

    const tree = renderer
      .create(<Homepage data={data}/>)
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
})

Это успешно проверяет макет stati c запрос. Но происходит сбой в запросах нижнего колонтитула и заголовка stati c, поскольку они не являются поддельными Со следующей ошибкой: 

TypeError: Cannot read property 'footerData' of undefined

Мой компонент макета выглядит следующим образом: 

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import Footer from "./footer"
import "../../styles/main.scss"

const Layout = ({ children, hideSearchBar = false, sectionClass = "" }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} hideSearchBar={hideSearchBar} />
      <section className={`section ${sectionClass}`}>
        {children}
      </section>
      <Footer />
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Мой нижний колонтитул выглядит так: 

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

export default () => {
    const data = useStaticQuery(graphql`
        query FooterContentQuery {
            footerData: allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "footer" } } }) {
                edges {
                    node {
                        frontmatter {
                            text
                        }
                    }
                }
            }
        }
    `)
    const { frontmatter: footer } = data.footerData.edges[0].node

    return (
        <footer>
            <div className="container has-text-centered">
                <hr/>
                <p>
                    Copyright © {new Date().getFullYear()} - <span dangerouslySetInnerHTML={{ __html: footer.text }} />
                </p>
            </div>
        </footer>
    )
}

1 Ответ

0 голосов
/ 27 марта 2020

Итак, я попробовал что-то сам и пришел к следующему решению:

Он проверяет все запросы stati c и возвращает данные для макета, нижнего колонтитула и заголовка. Я думаю, что это не самое лучшее решение. Так что, если кто-нибудь знает лучшее решение, дайте мне знать! 

import React from "react"
import renderer from "react-test-renderer"
import { useStaticQuery } from "gatsby"

import Homepage from "../src/pages/index"

beforeEach(() => {
    useStaticQuery.mockImplementation(() => ({
      "site": {
        "siteMetadata": {
          "title": "Test title"
        }
      },
      "footerData": {
        "edges": [{
            "node": {
                "frontmatter": {
                    "text": "This is the footer" 
                }
            }
        }]
      },
      "navbarData": {
        "edges": [{
            "node": {
                "frontmatter": {
                    "menuItems": [{"label": "Home","linkURL": "/"},]
                }
            }
        }]
      }
    }))
})  


describe("Homepage", () => {
  it("renders correctly", () => {
    const data = {
      "homePageData": {
        "edges": [{
          "node": {
            "frontmatter": {
              "title": "This is the title",
              "description": "Test description",
              "techstack": [{"label": "C#"}],
            }
          }
        }]
      }
    }

    const tree = renderer
      .create(<Homepage data={data}/>)
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
})
...