programing

Jest에서의 ESLint 사용방법

yoursource 2022. 12. 1. 23:50
반응형

Jest에서의 ESLint 사용방법

Jest 테스트 프레임워크와 함께 ESLint linter를 사용하려고 합니다.

농담 테스트는 다음과 같은 지구촌에서 진행됩니다.jest이것은 린터에게 말할 필요가 있습니다.하지만 까다로운 것은 디렉토리 구조입니다.Jeest에서는 테스트는 소스 코드와 함께 내장되어 있습니다.__tests__디렉토리 구조는 다음과 같습니다.

src
    foo
        foo.js
        __tests__
            fooTest.js
    bar
        bar.js
        __tests__
            barTest.js

보통, 모든 테스트를 1디르로 하고, 그냥 1디르로 더하면 됩니다..eslintrc지구촌을 추가하기 위해...하지만 난 확실히 더하고 싶지 않아..eslintrc일일이 철하다__test__dir.

지금으로서는 테스트 글로벌을 글로벌에 추가했습니다..eslintrc파일입니다만, 그 말은 제가 이제jest"올바른" 솔루션이 아닌 것 같습니다.

eslint가 디렉토리 이름에 기반한 어떤 패턴에 따라 규칙을 적용하도록 할 수 있는 방법이 있습니까?

이제 다음 문서를 추가할 수 있습니다.

"env": {
    "jest/globals": true
}

고객님께.eslintrc그러면 환경에 농담과 관련된 모든 것이 추가되어 린터의 오류/오류가 제거됩니다.

다음을 포함해야 할 수 있습니다.plugins: ["jest"]esconfig에 접속하여eslint-plugin-jest플러그인이 아직 기능하지 않는 경우.

ESLint는 버전 > = 4에서 다음을 지원합니다.

/*
.eslintrc.js
*/
const ERROR = 2;
const WARN = 1;

module.exports = {
  extends: "eslint:recommended",
  env: {
    es6: true
  },
  overrides: [
    {
      files: [
        "**/*.test.js"
      ],
      env: {
        jest: true // now **/*.test.js files' env has both es6 *and* jest
      },
      // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
      // "extends": ["plugin:jest/recommended"]
      plugins: ["jest"],
      rules: {
        "jest/no-disabled-tests": "warn",
        "jest/no-focused-tests": "error",
        "jest/no-identical-title": "error",
        "jest/prefer-to-have-length": "warn",
        "jest/valid-expect": "error"
      }
    }
  ],
};

다음으로 eslint config의 "extend in overrides" 제한에 대한 회피책(여기에서는 다른 답변에서 polling up!)을 나타냅니다.

overrides: [
  Object.assign(
    {
      files: [ '**/*.test.js' ],
      env: { jest: true },
      plugins: [ 'jest' ],
    },
    require('eslint-plugin-jest').configs.recommended
  )
]

https://github.com/eslint/eslint/issues/8813#issuecomment-320448724 에서

또한 다음과 같이 테스트 파일에서 테스트 환경을 설정할 수도 있습니다.

/* eslint-env jest */

describe(() => {
  /* ... */
})

Zachary의 답변을 완성하기 위해 eslint config의 "extend in overrides" 제한에 대한 회피책을 다음에 제시합니다.

overrides: [
  Object.assign(
    {
      files: [ '**/*.test.js' ],
      env: { jest: true },
      plugins: [ 'jest' ],
    },
    require('eslint-plugin-jest').configs.recommended
  )
]

https://github.com/eslint/eslint/issues/8813#issuecomment-320448724 에서

문제를 해결했습니다.REF

달려.

# For Yarn
yarn add eslint-plugin-jest -D

# For NPM
npm i eslint-plugin-jest -D

그 다음에, 그 다음에,.eslintrc파일

{
    "extends": ["airbnb","plugin:jest/recommended"],
}

2021년 현재 올바른 방법 또는 적어도 작동하는 방법은 설치입니다.@types/jest그리고.eslint-plugin-jest:

npm i -D eslint-plugin-jest @types/jest

Jest 플러그인 추가.eslintrc.js@Loren에서 언급한 재정의 명령을 사용합니다.

module.exports = {
  ...
  plugins: ["jest"],
  ...
  overrides: [
    {
      files: ["**/*.test.js"],
      env: { "jest/globals": true },
      plugins: ["jest"],
      extends: ["plugin:jest/recommended"],
    },
  ],
  ...
};

이렇게 하면 테스트 파일뿐만 아니라 소스 파일에서도 보풀 오류가 발생하지만 테스트 파일에서는 보풀 오류가 발생하지 않습니다.test기타 Jest의 함수는 정의되지 않은 것으로 나타나기 때문에 소스 파일에 저장됩니다.

몇 가지 답변은 다음과 같습니다.eslint-plugin-jest인스톨 되어 있습니다만, 그럴 필요는 없습니다만, 이 조작을 간단하게 실시할 수 있습니다..eslintrc파일, 추가:

  "globals": {
    "jest": true,
  }

ESLint V 6(2019년 후반에 출시) 이후 글로벌 기반 구성에서 다음과 같이 확장을 사용할 수 있습니다.

    "overrides": [
      {
        "files": ["*.test.js"],
        "env": {
          "jest": true
        },
        "plugins": ["jest"],
        "extends": ["plugin:jest/recommended"]
      }
    ]

패턴 베이스의 설정은, ESLint 의 2.0.0 릴리스로 스케줄 됩니다.다만, 현재로서는 (댓글에 기재된 바와 같이) 2개의 개별 태스크를 작성해야 합니다.하나는 테스트용, 다른 하나는 코드의 나머지 부분에 대해 실행되며 다른 .eslintrc 파일을 제공합니다.

추신: ESLint의 다음 릴리즈에 농담 환경이 등장하여 필요한 모든 글로벌 대회를 등록할 예정입니다.

최초 설치 eslint-plugin-jest

실행 중:

 yarn add eslint-plugin-jest or npm install eslint-plugin-jest

그런 다음 .eslintrc.json을 편집합니다.

{
   "env":{
     "jest": true
   }
}

추가는 adding for adding at for 다음 for add 。__tests__ 표시

해서 '어울릴 수 없다'를 도 있어요..eslintrc.yml__tests__폴더: 기본 설정을 확장합니다.

extends: <relative_path to .eslintrc>
env:
    jest: true

밖에 __tests__folder, 이 솔루션은 필요한 장소에만 joke 환경을 적용하기 때문에 가장 좋습니다.

많은 테스트 폴더 처리

테스트 폴더(OPS 케이스)가 더 있는 경우에도 해당 파일을 추가하는 것이 좋습니다.또한 이러한 폴더가 많은 경우 간단한 zsh 스크립트로 폴더를 추가할 수 있습니다.

#!/usr/bin/env zsh

for folder in **/__tests__/ ;do
    count=$(($(tr -cd '/' <<< $folder | wc -c)))
    echo $folder : $count
    cat <<EOF > $folder.eslintrc.yml
extends: $(printf '../%.0s' {1..$count}).eslintrc
env:
    jest: true
EOF
done

이 스크립트는 다음을 검색합니다.__tests__와 ""를 합니다..eslintrc.yml위의 설정에 파일을 첨부합니다.는 부모 파일이 들어 ..eslintrc.

여러 가지 옵션을 시도해 본 후에 실행하게 되었습니다.이게 다른 사람들이 막히는데 도움이 됐으면 좋겠어.

.eslintrc.json(루트 프로젝트 폴더):

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest/globals": true
    },
    "extends": [
        "standard",
        "plugin:jest/all"
    ],
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "jest/no-hooks": [
            "error",
            {
                "allow": [
                    "afterEach",
                    "beforeEach"
                ]
            }
        ]
    },
    "plugins": [
        "jest"
    ]
}

.babelrc(루트 프로젝트 폴더에 있음):

{}

.discloss.json(루트 프로젝트 폴더):

{
  "scripts": {
    "test": "jest",
    "lint": "npx eslint --format=table .",
    "lintfix": "npx eslint --fix ."
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.15.0",
    "aws-sdk-mock": "^5.2.1",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.24.0",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "jest": "^27.0.6"
  }
}

VS Code settings.xml(에디터 구성: save + babel 파서의 자동 수정 활성화):

    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "eslint.options": {
        "parser": "@babel/eslint-parser"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript"
    ]

.eslintignore 파일에 다음 값을 추가합니다.

**/__tests__/

이 경우 __tests_ 디렉토리의 모든 인스턴스와 해당 하위 인스턴스는 무시됩니다.

언급URL : https://stackoverflow.com/questions/31629389/how-to-use-eslint-with-jest

반응형