Reference Error：未定义窗口，请考虑使用“ JSdom”。测试环境（Jest V28）

Question

我想帮助解决此错误。

正在使用开玩笑的V28.0.0。

这是我的包装的方法。 DevDepentencies看起来像

    "scripts":{
       ...,
       "test": "jest --env=node --watchAll --coverage --verbose",
    },

   "devDependencies": {
        ...
        "@babel/preset-env": "^7.16.11",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.0",
        "@types/jest": "^27.4.1",
        "babel-jest": "^28.0.0",
        "jest": "^28.0.0",
        "jest-environment-jsdom": "^28.0.1",
        "jsdom": "^19.0.0",
    }
}

我还有一个Jest.config.js文件，看起来像

module.exports = {
    roots: ['<rootDir>/tests/'],
    testEnvironment: 'jsdom',
    testMatch: ['**/?(*.)+(test).js'],
    transform: {
        '^.+\\.js?$': 'babel-jest',
    },
    moduleNameMapper: {
        ...
    },
}

我的实际测试文件看起来像

import React from 'react'
import { render, cleanup, screen } from '@testing-library/react'
import renderer from 'react-test-renderer'
import '@testing-library/jest-dom'

/**
 * @jest-environment jsdom
 */

//components
import MyComponent from '../../../../src/website/Components/MyComponent'

test('should have the Add recipients text label', () => {
    const addRecipientsLabel = screen.getByTestId('label-element')
    expect(true).toBe(true)
    render(<MyComponent />)
    expect(addRecipientsLabel).toHaveTextContent('Add Recipients')
})

Answer 1

您需要在文件顶部包括@jest-environment。甚至是进口。

https：//jestjs.io/docs/docs/configuration#testenvestenvestenvencorment #testenvestenvironment-vernvorment-string-string

eg。

/**
 * @jest-environment jsdom
 */

import React from 'react'
      
//components
import MyComponent from '...'

test('should have the Add recipients text label', () => {
    // test
})

Answer 2

（ op已经做到了，但是为未来的访问者记录

。必须单独安装：

npm install --save-dev jest-environment-jsdom

或

yarn add --dev jest-environment-jsdom

迁移指南：

https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28#jsdom