如何测试包含具有多个静态查询的组件的 gatsby 页面？

Question

我正在研究我的 Gatsby 网站的测试，其中有一个主页组件。它呈现布局和主页内容本身。它自己的布局呈现页脚和页眉。

\n\n

布局对站点名称使用静态查询，页脚和页眉对页脚内容和页眉菜单结构使用静态查询。

\n\n

目前我只能模拟静态查询之一，如下面的示例所示。我如何能够模拟所有这三个静态查询？模拟所有这三个静态查询的最佳实践/最好的方法是什么？

\n\n

我当前的测试如下所示：

\n\n

import React from "react"\nimport renderer from "react-test-renderer"\nimport { useStaticQuery } from "gatsby"\n\nimport Homepage from "../src/pages/index"\n\nbeforeEach(() => {\n    useStaticQuery.mockImplementationOnce(() => ({\n      "site": {\n        "siteMetadata": {\n          "title": "Test title"\n        }\n      }\n    }))\n})  \n\n\ndescribe("Homepage", () => {\n  it("renders correctly", () => {\n    const data = {\n      "homePageData": {\n        "edges": [{\n          "node": {\n            "frontmatter": {\n              "title": "This is the title",\n              "description": "Test description",\n              "techstack": [{"label": "C#"}],\n            }\n          }\n        }]\n      }\n    }\n\n    const tree = renderer\n      .create(<Homepage data={data}/>)\n      .toJSON()\n    expect(tree).toMatchSnapshot()\n  })\n})\n

\n\n

这成功地模拟了布局静态查询。但页脚和页眉静态查询失败，因为它们没有被模拟。出现以下错误：

\n\n

TypeError: Cannot read property \'footerData\' of undefined\n

\n\n

我的布局组件如下所示：

\n\n

import React from "react"\nimport PropTypes from "prop-types"\nimport { useStaticQuery, graphql } from "gatsby"\n\nimport Header from "./header"\nimport Footer from "./footer"\nimport "../../styles/main.scss"\n\nconst Layout = ({ children, hideSearchBar = false, sectionClass = "" }) => {\n  const data = useStaticQuery(graphql`\n    query SiteTitleQuery {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `)\n\n  return (\n    <>\n      <Header siteTitle={data.site.siteMetadata.title} hideSearchBar={hideSearchBar} />\n      <section className={`section ${sectionClass}`}>\n        {children}\n      </section>\n      <Footer />\n    </>\n  )\n}\n\nLayout.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport default Layout\n

\n\n

我的页脚看起来像这样：

\n\n

import React from "react"\nimport { useStaticQuery, graphql } from "gatsby"\n\nexport default () => {\n    const data = useStaticQuery(graphql`\n        query FooterContentQuery {\n            footerData: allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "footer" } } }) {\n                edges {\n                    node {\n                        frontmatter {\n                            text\n                        }\n                    }\n                }\n            }\n        }\n    `)\n    const { frontmatter: footer } = data.footerData.edges[0].node\n\n    return (\n        <footer>\n            <div className="container has-text-centered">\n                <hr/>\n                <p>\n                    Copyright \xc2\xa9 {new Date().getFullYear()} - <span dangerouslySetInnerHTML={{ __html: footer.text }} />\n                </p>\n            </div>\n        </footer>\n    )\n}\n

\n

Answer 1

所以我自己尝试了一些方法并得出以下解决方案：

它模拟所有静态查询并返回布局、页脚和页眉的数据。我认为这不是最好的解决方案。因此，如果有人知道更好的解决方案，请告诉我！

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()
  })
})