Node.js 如何测试使用带有Jest的StaticQuery的组件

我试图为我在盖茨比网站上构建的组件创建测试，但遇到了一些麻烦。该组件如下所示（基于此处找到的盖茨比文件：）：

export const PureLayout=（{children，data}）=>{
console.log（{children}）
console.log（{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()
  })
})

description（'Layout'，（）=>{
它（'正确呈现_'，（）=>{
常数数据={
地点：{
站点元数据：{
标题：“试验场地标题”，
},
},
}
常量树=渲染器
.创造(
试验

)
.toJSON（）
expect（tree.toMatchSnapshot（））
})
})

我在这里遗漏了什么？我已经通过调试器运行了好几次，看起来道具被正确地传递到组件中

感谢您的帮助/见解

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

mockConstructor（…）：渲染未返回任何内容。这通常是 表示缺少return语句。或者，若不呈现任何内容，则返回 空

14 |}
15 |常数树=渲染器
>16 |创建(
|        ^
17 |         
18 |试验

19 |         
在ReconcileChildfiers（节点_modules/react test renderer/cjs/react test renderer.development.js:5097:23）
在reconcileChildren（node_modules/react test renderer/cjs/react test renderer.development.js:7234:28）
在mountIndeterminateComponent（node_modules/react test renderer/cjs/react test renderer.development.js:7968:5）
开始工作时（node_modules/react test renderer/cjs/react test renderer.development.js:9019:16）
执行工作时（节点\模块/react测试呈现器/cjs/react测试呈现器。development.js:12649:12）
在workLoopSync（node_modules/react test renderer/cjs/react test renderer.development.js:12622:22）
在performSyncWorkOnRoot（node_modules/react test renderer/cjs/react test renderer.development.js:12333:9）
在节点_modules/react test renderer/cjs/react test renderer.development.js:1825:24
在不稳定的情况下使用优先级运行（node_modules/react test renderer/node_modules/scheduler/cjs/scheduler.development.js:653:12）
在runWithPriority（node_modules/react test renderer/cjs/react test renderer.development.js:1775:10）
在flushSyncCallbackQueueImpl（node_modules/react test renderer/cjs/react test renderer.development.js:1820:7）
在flushSyncCallbackQueue（node_modules/react test renderer/cjs/react test renderer.development.js:1808:3）
在scheduleUpdateOnFiber（节点_modules/react test renderer/cjs/react test renderer.development.js:11776:9）
在updateContainer（node_modules/react test renderer/cjs/react test renderer.development.js:14747:3）
在Object.create（node_modules/react test renderer/cjs/react test renderer.development.js:15455:5）
在Object.it（src/__tests\u_/layout.js:16:8）

---

因此，我回到文档中进行挖掘，并确保我按照Robin的上述评论进行了跟踪。在挖掘过程中，我发现，我需要直接测试PureLayout组件，而不是测试布局组件。最终结果是改变了这一点：

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

为此：

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

---

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

因此我回到文档中进行挖掘，并确保我按照Robin的上述评论进行了跟踪。在挖掘过程中，我发现我需要直接测试PureLayout，而不是测试布局组件。最终结果是这是否改变了这一点：

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

为此：

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

---

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

您是否确保按照中所述遵循盖茨比的测试设置？在开始运行Jest之前，有很多步骤要完成，以确保您的回购协议具有正确的模拟和Jest设置。您是否确保遵循盖茨比的测试设置在开始运行Jest之前，要确保您的回购协议具有正确的模拟和Jest设置，需要执行很多步骤。