javascript - Xem xét sử dụng môi trường kiểm tra "jsdom"

Tôi có bài kiểm tra đơn giản này:

import React from 'react'
import { render } from '@testing-library/react'

import Button from '.'

describe('Button', () => {
  it('renders button without crashing', () => {
    const label = 'test'

    render(<Button label={label} />)
  })
})

Và tôi có một jest.config.json với nội dung sau

{
  "setupFilesAfterEnv": [
    "<rootDir>/lib/settings/setupTests.ts"
  ]
}

Và trên setupTests.ts của tôi tôi có

import '@testing-library/jest-dom'

Khi tôi chạy npm run test (mà chỉ chạy jest), tôi nhận được lỗi sau:

Lỗi dưới đây có thể do sử dụng môi trường kiểm thử sai, xem https://jestjs.io/docs/configuration#testenvironment-string.

Hãy cân nhắc sử dụng môi trường kiểm thử "jsdom".

Tôi đang làm gì sai? Trước khi nâng cấp, điều này vẫn hoạt động.

Câu trả lời #1

Trong package.json của bạn, hoặc tệp jest.config.js/jest.config.ts, thay đổi giá trị của thuộc tính testEnvironment thành jsdom.

package.json

"jest":{
    "testEnvironment": "jsdom"
}

jest.config.[js|ts]

module.exports = {
    "testEnvironment": "jsdom"
}

Lưu ý quan trọng cho jest >28

Nếu bạn đang sử dụng jest 28, bạn sẽ cần cài đặt jest-environment-jsdom riêng bằng cách:

npm: npm i jest-environment-jsdom --save-dev

yarn: yarn add -D jest-environment-jsdom

Tại sao?

Theo mặc định, jest sử dụng node testEnvironment. Điều này về cơ bản làm cho bất kỳ bài kiểm tra nào dành cho môi trường trình duyệt trở nên không hợp lệ.

jsdom là một triển khai của môi trường trình duyệt, hỗ trợ các loại kiểm thử giao diện người dùng này.

Đối với Jest phiên bản 28 trở lên, jest-environment-jsdom đã bị gỡ bỏ khỏi cài đặt mặc định jest để giảm kích thước gói.

Đọc thêm

tài liệu môi trường kiểm tra Jest

Jest 28 các thay đổi phá vỡ

Câu trả lời #2

Điều này có thể được giải quyết trên cơ sở từng tệp kiểm tra bằng cách thêm một khối tài liệu @jest-environment vào đầu tệp của bạn. Ví dụ:

/** @jest-environment jsdom */
import React from 'react'
import { render } from '@testing-library/react'

import Button from '.'

describe('Button', () => {
  it('renders button without crashing', () => {
    const label = 'test'

    render(<Button label={label} />)
  })
})

Nếu dự án của bạn có một hỗn hợp các tệp UI và không phải UI, điều này thường được ưu tiên hơn so với việc thay đổi toàn bộ dự án bằng cách đặt "testEnvironment": "jsdom" trong package.json hoặc cấu hình Jest của bạn. Bằng cách bỏ qua việc khởi tạo môi trường JSDom cho các bài kiểm tra không phải UI, Jest có thể chạy các bài kiểm tra của bạn nhanh hơn. Thực tế, đó là lý do tại sao Jest đã thay đổi môi trường kiểm tra mặc định trong Jest 27.