How to config jest jsdom environment?

Question

I am using jest and react testing library to test my react application. I wanna test a page that needs ISR (nextJs getStaticProps) to render so I installed next-page-tester package. It renders client side rendering page normally but when it comes to the one that uses ISR rendering then the below error happened. (I have tried adding testEnvironment: 'jsdom' in jest.config.js file and the comment at the top of my test file to config the jsdom environment).

• package.json

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

• Error:

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',
  },
}

Test file:

/**
 * @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()
  })
})

/pages/topics:

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

In my case, the solution was:

• Install this package: jest-environment-jsdom
• Add testEnvironment: 'jest-environment-jsdom' into my jest.config.js;
• Run yarn test (my script: "test": "jest --verbose")

You can see better bellow or the file here in repository ShareBookBR/sharebook-frontend-next

module.exports = {
    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
    moduleNameMapper: {
        //To include new paths, include also into tsconfig.paths.json
        '\\.(scss|sass|css)$': 'identity-obj-proxy',
        // '^@/sharebook-components/(.*)$': '<rootDir>/components/$1', //to all paths, ex: @sharebook-components/somegfolder
        '^@sharebook-themes': '<rootDir>/src/themes',
        '^@sharebook-layouts': '<rootDir>/src/layouts',
        '^@sharebook-components': '<rootDir>/src/components',
        '^@sharebook-hooks': '<rootDir>/src/hooks',
        '^@sharebook-configs': '<rootDir>/src/configs',
        '^@sharebook-axios': '<rootDir>/src/axios',
        '^@sharebook-utils': '<rootDir>/src/utils'
    },
    testEnvironment: 'jest-environment-jsdom'
};

Answer 2

You can add the testing environment in jest config file just like

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',
  },
  testEnvironment: 'jsdom'
}