reactjs - 如何配置 jest jsdom 环境？

Question

我正在使用 jest 和 react 测试库来测试我的 react 应用程序。我想测试一个需要 ISR (nextJs getStaticProps) 来渲染的页面，所以我安装了 next-page-tester包裹。它正常呈现客户端呈现页面，但是当涉及到使用 ISR 呈现的页面时，发生了以下错误。 (我已经尝试在 jest.config.js 文件中添加 testEnvironment: 'jsdom' 和我的测试文件顶部的注释来配置 jsdom 环境)。

package.json

    "test": "jest --env=jsdom",

错误:

FIRESTORE (8.6.8) INTERNAL ASSERTION FAILED: Unexpected state

  at fail (node_modules/@firebase/firestore/src/util/assert.ts:40:9)
  at hardAssert (node_modules/@firebase/firestore/src/util/assert.ts:54:5)
  at fromBytes (node_modules/@firebase/firestore/src/remote/serializer.ts:252:5)
  at fromWatchChange (node_modules/@firebase/firestore/src/remote/serializer.ts:475:25)
  at PersistentListenStream.Object.<anonymous>.PersistentListenStream.onMessage

(node_modules/@firebase/firestore/src/remote/persistent_stream.ts:581:25) at node_modules/@firebase/firestore/src/remote/persistent_stream.ts:461:21 at node_modules/@firebase/firestore/src/remote/persistent_stream.ts:514:18 at node_modules/@firebase/firestore/src/util/async_queue_impl.ts:168:14

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment.

ReferenceError: document is not defined

  at Object.cleanupDOM (node_modules/next-page-tester/dist/makeRenderMethods.js:52:5)
  at Object.cleanup (node_modules/next-page-tester/dist/testHelpers.js:39:25)

jest.config.js:

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  setupFiles: ['./src/__mocks__/client.js'],
  setupFilesAfterEnv: ['./jest.setup.js', '@testing-library/jest-dom/extend-expect'],
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
}

测试文件:

/**
 * @jest-environment jsdom
 */

import '@testing-library/jest-dom/extend-expect'
import { mockFirebase } from 'firestore-jest-mock'
import { getPage, initTestHelpers } from 'next-page-tester'
import { render, screen } from '../test-utils'

initTestHelpers()

mockFirebase({
  database: {
    topics: [
      {
        id: 'IWkxBYYrA19IYeKPWEYx',
        all_day: false,
        closed: false,
        created_at: { seconds: 1626400885, nanoseconds: 372000000 },
        description: 'test',
        en_title: 'test',
        en_description: 'test',
        event_date: {
          end_date: { seconds: 1626400859, nanoseconds: 372000000 },
          start_date: { seconds: 1626400859, nanoseconds: 372000000 },
        },
        genre: 'information',
        title: 'test',
        topic_id: 'Ux6FPQgXL9sX6vm4V9Lk',
        updated_at: { seconds: 1626400885, nanoseconds: 373000000 },
      },
      {
        id: 'Nwev6hr7m2hyc2oLblhC',
        all_day: false,
        closed: false,
        en_title: 'test',
        en_description: 'test',
        created_at: { seconds: 1626400885, nanoseconds: 372000000 },
        description: 'test',
        event_date: {
          end_date: { seconds: 1626400859, nanoseconds: 372000000 },
          start_date: { seconds: 1626400859, nanoseconds: 372000000 },
        },
        genre: 'information',
        title: 'test',
        topic_id: 'test',
        updated_at: { seconds: 1626400885, nanoseconds: 373000000 },
      },
      {
        id: 'Nwev6hr7m2hyc2oLblhCee',
        all_day: false,
        closed: false,
        en_title: 'test',
        en_description: 'test',
        created_at: { seconds: 1626400885, nanoseconds: 372000000 },
        description: 'test',
        event_date: {
          end_date: { seconds: 1626400859, nanoseconds: 372000000 },
          start_date: { seconds: 1626400859, nanoseconds: 372000000 },
        },
        genre: 'information',
        title: 'test',
        topic_id: 'Ux6FPQgXL9sX6vm4V9Lk',
        updated_at: { seconds: 1626400885, nanoseconds: 373000000 },
      },
    ],
  },
})

describe('Topics page', () => {
  it('should render topics page', async () => {
    const { page } = await getPage({
      route: '/topics',
    })
    render(page)
    expect(await screen.getByText(/topics/i)).toBeInTheDocument()
    screen.debug()
  })
})

/页面/主题:

import { Layout } from 'components/layout'
import { TopicsList } from 'components/organisms/topics'
import { fetchSelectTopics } from 'lib/topics'
import { GetStaticProps } from 'next'

const Topics = (props) => {
  const { topics } = props

  return (
    <Layout pageTitle={'Topics'} dark={true}>
      <TopicsList topics={topics} />
    </Layout>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const getTopics = await fetchSelectTopics('information')
  const topics = JSON.parse(JSON.stringify(getTopics))

  return {
    props: { topics: topics },
    revalidate: 10,
  }
}

export default Topics

Answer 1

我遇到了同样的问题，并且能够通过创建自定义 jsdom 环境来解决它。尝试此 URL 中的步骤