Как проверить компонент, который использует StaticQuery с Jest - PullRequest
Новая
       92

Как проверить компонент, который использует StaticQuery с Jest

1 голос
/ 07 апреля 2020

Я пытаюсь создать тесты для компонентов, которые я встроил в сайт на базе 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()
  })
})

Что мне здесь не хватает? Я запускал это через отладчик несколько раз, и похоже, что реквизиты передаются в компонент правильно.

Спасибо за вашу помощь / понимание!

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

mockConstructor (...): Ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не отобразить, верните null. 

  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)

1 Ответ

0 голосов
/ 08 апреля 2020

Поэтому я вернулся к документам, чтобы покопаться и удостовериться, что я следовал им так же хорошо, как и я, хотя опирался на комментарий Робина выше. Во время копания я обнаружил, что вместо тестирования компонента Layout мне нужно было напрямую протестировать PureLayout. Конечный результат состоит в том, что изменение этого: 

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

на это: 

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

исправляет тест, чтобы он теперь прошел. Надеюсь, что это поможет кому-то еще в будущем!

...