"jsdom" 테스트 환경의 사용을 검토하다

"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} />)
  })
})

그리고 저는jest.config.json이 내용으로

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

그리고 나의 위에setupTests.ts있습니다

import '@testing-library/jest-dom'

내가 달릴 때npm run test(그냥 실행)jest)는, 다음의 에러가 발생했습니다.

다음 오류는 잘못된 테스트 환경을 사용했기 때문에 발생할 수 있습니다.https://jestjs.io/docs/configuration#testenvironment-string 를 참조하십시오.

"jsdom" 테스트 환경의 사용을 검토합니다.

내가 뭘 잘못하고 있지?이 기능은 업그레이드 전에 사용할 수 있습니다.

고객님의 고객명package.json, 또는jest.config.js/jest.config.ts파일, 값 변경testEnvironment의 재산.jsdom.

package.json

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

jest.config.[js|ts]

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

농담을 위한 중요 주의 > 28

jeast 28을 사용하고 있는 경우는, 를 인스톨 할 필요가 있습니다.jest-environment-jsdom다음 중 하나에 의해 개별적으로 처리됩니다.

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

실:yarn add -D jest-environment-jsdom

왜요?

디폴트로는 joke는node테스트 환경이로 인해 브라우저 환경에 대한 테스트는 기본적으로 무효가 됩니다.

jsdom는 이러한 유형의 UI 테스트를 지원하는 브라우저 환경의 구현입니다.

Jest 버전 28 이상의 경우jest-environment-jsdom디폴트에서 삭제되었습니다.jest패키지 크기를 줄이기 위한 설치입니다.

추가 판독치

jajest test환경 매뉴얼

Jeast 28 브레이크 체인지 여부

이 문제는 테스트 파일 단위로 해결하려면@jest-environment파일 선두에 docblock을 입력합니다.예를 들어 다음과 같습니다.

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

프로젝트에 UI 파일과 비UI 파일이 혼재되어 있는 경우, 이 방법은 보통 설정에 따라 프로젝트 전체를 변경하는 것보다 선호됩니다."testEnvironment": "jsdom"패키지에 포함되어 있습니다.json 또는 Jest 설정.Jest는 UI가 아닌 테스트의 JSDom 환경 초기화를 건너뛰면 테스트를 더 빠르게 실행할 수 있습니다.이것이 바로 Jest가 Jest 27에서 기본 테스트 환경을 변경한 이유입니다.

기본적으로 testEnvironment 값은 node.js 환경에서 모든 테스트 케이스를 실행하는 노드이지만 js-dom은 환경과 같은 브라우저를 제공합니다.jsdom 값을 추가하는 대신 다음과 같은 파일 고유의 값을 추가할 수도 있습니다.

/**
 * @jest-environment jsdom
 */
// the above comment helps
test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

테스트 파일 고유의 환경도 추가할 수 있습니다.이 링크를 참조해 주세요.

https://jestjs.io/docs/configuration#testenvironment-string

이거 먹어봐.

module.exports = {
testEnvironment: 'jsdom',

}

언급URL : https://stackoverflow.com/questions/69227566/consider-using-the-jsdom-test-environment