Jest ile ESLint nasıl kullanılır


254

ESLint linterini Jest test çerçevesiyle kullanmaya çalışıyorum.

Jest testleri jest, linterden bahsetmem gereken bazı globallerle çalışır ; ancak zor olan şey dizin yapısıdır, Jest ile testler __tests__klasörlerde kaynak kodu ile gömülüdür , bu nedenle dizin yapısı şöyle görünür:

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

Normalde, tüm testlerimi tek bir dir altında yapardım ve sadece .eslintrcgloballeri eklemek için bir dosya ekleyebilirdim ... ama kesinlikle .eslintrcher bir __test__dir'e bir dosya eklemek istemiyorum .

Şimdilik, test global'lerini global .eslintrcdosyaya ekledim , ancak bu artık jesttest dışı kodda referans alabileceğim için, "doğru" çözüm gibi görünmüyor.

Dizin adına dayalı bazı kalıplara dayalı kurallar uygulamak için eslint almanın bir yolu var mı, ya da bunun gibi bir şey mi?


1
Bu, gerçek bir cevap için biraz fazla kaba bir kuvvettir, ancak elle eslint-testbir glob içeren bir dosyayı kullanan ayrı bir linting göreviniz olabilir , örn eslint **/__tests__/*.js -c eslint-test.yml. Bununla birlikte, üretim koduna sızan bir jestveya beforeEachküresel tehlike çok fazla olduğunu sanmıyorum ;)
Nick Tomlin

Yanıtlar:


674

Dokümanlar artık ekleyebileceğinizi gösteriyor:

"env": {
    "jest": true
}

Bu .eslintrc, linter hatalarını / uyarılarını ortadan kaldırarak, jestle ilgili tüm şeyleri ortamınıza ekleyecektir.


27
Bu yöntemle, " .test.js" veya "__tests __ / .js" şablonuyla eşleşen dosyaların dışında " tanımla" veya "it" kullanımı , linting hatalarına neden olmaz. Bunu başarabilmenin bir yolu var mı?
n1ru4l

7
Size l0rin @ bir ekleyebilir .eslintrcEğer varsayılan uzatmak dosyayı .eslintrcsizin de __tests__klasöründe. OP ile aynı sorununuz varsa (birden fazla test klasörü), .eslintrcbir şablon ve küçük bir bash betiği (bir şey gibi ls **/__tests/ | xargs cp templates/.eslintrc) olanları oluşturabilirsiniz
Ulysse BN

2
ilgili bağlantı burada
devonj

73

ESLint bunu> = 4 sürümünden itibaren destekler:

/*
.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"
      }
    }
  ],
};

İşte eslint config "geçersiz kılmaları genişlet" sınırlaması için bir geçici çözüm (burada başka bir cevap, oy verin!):

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

Gönderen https://github.com/eslint/eslint/issues/8813#issuecomment-320448724


4
Teşekkürler, bu soru için gerçekten doğru çözüm, çünkü gerçekten cevaplıyor. benim için çalıştı!
sra

1
Bu harika! Sürümüne> = 4 benim ESLint güncellenmesi ve bir ekleme ile "files"ve "env"nesneyi "overrides"içinde eslint.rcartık test dosyalarının dışında tüylenme geçen Jest özgü sözdizimi hakkında endişe var.
TheDarkIn1978

1
Mükemmel bir çözümdür ve standart olmayan bir klasör yapısına sahip olduğunuzda diğer çerçeveler (yasemin) için de çalışır.
Elliot Nelson

2
Kabul edilen cevabı yazan adam benim - bu cevap benimkinden çok daha iyi! Cevabımı yazdığım halde, bu sorunu iyi çözmenin tek yolu buydu.
Dave Cooper

6
ESLint artık geçersiz kılmalarda genişletmeyi destekliyor
Nick McCurdy

21

Ayrıca test dosyanızdaki test ortamını aşağıdaki gibi ayarlayabilirsiniz:

/* eslint-env jest */

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


2

Desen tabanlı yapılandırmalar, ESLint'in 2.0.0 sürümü için planlanmıştır. Ancak şimdilik iki ayrı görev oluşturmanız gerekecek (yorumlarda belirtildiği gibi). Biri testler için ve diğeri kodun geri kalanı için ve her ikisini de çalıştırırken, farklı .eslintrc dosyaları sağlar.

PS: ESLint'in bir sonraki sürümünde bir jest ortamı var, gerekli tüm küreselleri kaydedecek.


2

REF problemini çözdüm

Çalıştırmak

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

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

Ve sonra .eslintrcdosyanıza ekleyin

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

1

Yalnızca __tests__klasör için ortam ekle

Klasörlerinize temel yapılandırmayı genişleten bir .eslintrc.ymldosya ekleyebilirsiniz __tests__:

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

Yalnızca bir __tests__klasörünüz varsa, bu çözüm en iyisidir çünkü jest ortamını yalnızca gerektiği yerde kapsamaktadır.

Birçok test klasörü ile başa çıkmak

Daha fazla test klasörünüz (OPs davası) varsa, yine de bu dosyaları eklemenizi öneririm. Ve bu klasörlerden tonunuz varsa bunları basit bir zsh komut dosyası ile ekleyebilirsiniz:

#!/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

Bu komut dosyası __tests__klasörleri arayacak ve .eslintrc.ymlyukarıda gösterilen yapılandırmaya bir dosya ekleyecektir . Bu komut dosyasının üst öğenizi içeren klasörde başlatılması gerekir .eslintrc.


1

bazı cevaplar 'eslint-plugin-jest' yüklü olduğunu varsayar, ancak bunu yapmanıza gerek kalmadan, bunu sadece .eslintrcdosyanızda yapabilirsiniz, ekleyin:

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

-8

.Eslintignore dosyanıza aşağıdaki değeri ekleyin:

**/__tests__/

Bu, __tests__ dizini ve çocuklarının tüm örneklerini yoksaymalıdır.


4
İstediğim bu değil, test dosyalarını görmezden gelmek istemiyorum, yine de onları tiftik etmek istiyorum, sadece doğru tiftik için gerekli seçenekleri nasıl belirleyeceğimi bulmak istiyorum.
Retsam

2
Çok kötü bir fikir, eslint test kodu da dahil olmak üzere tüm kodlarda yardımcı olur.
Daniel Kmak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.