如何测试使用带有 Jest 的 StaticQuery 的组件答案

【问题标题】：How do I test a Component that uses a StaticQuery with Jest如何测试使用带有 Jest 的 StaticQuery 的组件
【发布时间】：2020-07-19 22:16:20
【问题描述】：

我正在尝试为我在基于 Gatsby 的站点中构建的组件创建测试，但遇到了一些麻烦。该组件如下（基于在此处找到的 Gatsby 文档：https://www.gatsbyjs.org/docs/testing-components-with-graphql/#testing-staticquery）：

   export const PureLayout = ({ children, data }) => {
      console.log({ children })
      console.log({ data })
      return (
        <div>
          <GlobalStyle />
          <Helmet
            title={data.site.siteMetadata.title}
            meta={[`enter code here`
              {
                name: 'description',
                content:
                  'The portfolio and blog of Chris Kujawa, a full-stack web developer specializing in creating blazingly fast e-commerce sites with Gatsby and React JS.',
              },
              {
                name: 'keywords',
                content:
                  'web development, web developer, ecommerce development, ecommerce website design, ecommerce website development, ecommerce website developer, ecommerce website, custom ecommerce website, GatsbyJS, GatsbyJS Development, GatsbyJS website, Gatsby ecommerce, ReactJS, React developer',
              },
            ]}
          >
            <html lang="en" />
          </Helmet>
          <Header />
          <ChildContainer>{children}</ChildContainer>
          <Footer />
        </div>
      )
    }

    export const Layout = props => (
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => <PureLayout {...props} data={data} />}
      />

测试看起来像这样：

describe('Layout', () => {
  it('renders_correctly', () => {
    const data = {
      site: {
        siteMetadata: {
          title: 'Test Site Title',
        },
      },
    }
    const tree = renderer
      .create(
        <Layout data={data}>
          <p>test</p>
        </Layout>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })
})

我在这里缺少什么？我已经通过调试器运行了几次，看起来好像 props 正确地传递到了组件中。

感谢您的帮助/见解！

组件在浏览器中渲染得很好，但是当我运行测试时出现以下错误：

mockConstructor(...)：渲染没有返回任何内容。这通常表示缺少返回语句。或者，什么也不渲染，返回空。

  14 |     }
  15 |     const tree = renderer
> 16 |       .create(
     |        ^
  17 |         <Layout data={data}>
  18 |           <p>test</p>
  19 |         </Layout>

  at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5097:23)
  at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7234:28)
  at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7968:5)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
  at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
  at unstable_runWithPriority (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:653:12)
  at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
  at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
  at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
  at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11776:9)
  at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14747:3)
  at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15455:5)
  at Object.it (src/__tests__/layout.js:16:8)

【问题讨论】：

您是否确保按照 Unit Testing guide 中所述的 Gatsby 测试设置进行操作？在您开始运行 Jest 之前，需要执行很多步骤来确保您的 repo 具有正确的模拟和 Jest 设置。

标签： node.js reactjs unit-testing jestjs gatsby

【解决方案1】：

所以我回到文档中进行挖掘，并确保我按照上面罗宾的评论进行了跟踪。在挖掘的过程中，我发现我不需要测试 Layout 组件，而是需要直接测试 PureLayout。最终结果是改变这个：

import { Layout } from '../components/layout'

到这里：

import { PureLayout as Layout } from '../components/layout'

修复测试，使其现在通过。希望这对将来的其他人有所帮助！

【讨论】：