[javascript] Jest와 함께 ESLint를 사용하는 방법

JAVASCRIPT / 글쓴이

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

Jest 테스트는 다음과 같은 일부 글로벌에서 실행됩니다 jest. 그러나 까다로운 것은 디렉토리 구조입니다 .Jest에서 테스트는 __tests__폴더에 소스 코드가 포함되어 있으므로 디렉토리 구조는 다음과 같습니다.

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

일반적으로 단일 디렉토리에서 모든 테스트를 수행 .eslintrc하고 전역을 추가하기 위해 파일을 추가 할 수는 있지만 .eslintrc모든 단일 __test__디렉토리에 파일을 추가하고 싶지는 않습니다 .

지금은 테스트 전역을 전역 .eslintrc파일에 추가했지만 이제는 jest테스트되지 않은 코드에서 참조 할 수 있으므로 “올바른”솔루션처럼 보이지 않습니다.

디렉토리 이름 또는 그와 유사한 것을 기반으로 패턴을 기반으로 규칙을 적용하는 방법이 있습니까?

답변

문서 는 이제 다음을 추가 할 수 있음을 보여줍니다.

"env": {
    "jest": true
}

당신에게 .eslintrc어느 린터 오류 / 경고를 제거, 환경에 모든 농담 관련된 일을 추가합니다.

답변

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의 “override 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

답변

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

/* eslint-env jest */

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

답변

Zachary의 답변을 완료하려면 eslint config의 “override 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

답변

패턴 기반 구성은 ESLint의 2.0.0 릴리스로 예정되어 있습니다. 그러나 지금은 주석에 언급 된대로 두 개의 개별 작업을 만들어야합니다. 하나는 테스트 용이고 나머지 하나는 나머지 .eslintrc 파일을 제공하면서 두 코드를 모두 실행합니다.

PS ESLint의 다음 릴리스에는 jest 환경이 있으며 필요한 모든 전역을 등록합니다.

답변

나는 문제를 해결했다 REF를

운영

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

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

그런 다음 .eslintrc파일에 추가 하십시오

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

답변

환경 만 추가 __tests__폴더

기본 구성을 확장 하는 .eslintrc.yml파일을 __tests__폴더 에 추가 할 수 있습니다 .

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

하나만 있다면 __tests__ 폴더 경우이 솔루션은 필요한 경우에만 jest 환경을 다루기 때문에 최상입니다.

많은 테스트 폴더 다루기

더 많은 테스트 폴더가있는 경우 (OP 사례) 해당 파일을 추가하는 것이 좋습니다. 그리고 그 폴더가 많으면 간단한 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.