Cara menggunakan ESLint dengan Jest

254

Saya mencoba untuk menggunakan linter ESLint dengan kerangka pengujian Jest.

Tes bercanda berjalan dengan beberapa global seperti jest, yang saya harus memberitahu linter tentang; tetapi yang sulit adalah struktur direktori, dengan Jest tes tertanam dengan kode sumber dalam __tests__folder, sehingga struktur direktori terlihat seperti:

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

Biasanya, saya akan memiliki semua tes saya di bawah satu dir, dan saya bisa menambahkan .eslintrcfile di sana untuk menambahkan global ... tapi saya tentu tidak ingin menambahkan .eslintrcfile ke setiap __test__dir tunggal .

Untuk saat ini, saya baru saja menambahkan tes global ke .eslintrcfile global , tetapi karena itu berarti saya sekarang dapat referensi jestdalam kode non-pengujian, yang sepertinya bukan solusi "benar".

Apakah ada cara untuk membuat eslint menerapkan aturan berdasarkan beberapa pola berdasarkan nama direktori, atau sesuatu seperti itu?

Retsam
sumber
1
Ini agak terlalu kasar untuk jawaban yang sebenarnya, tetapi Anda bisa memiliki tugas linting terpisah yang secara manual menggunakan eslint-testfile dengan glob, misalnya eslint **/__tests__/*.js -c eslint-test.yml. Yang mengatakan, saya tidak berpikir ada banyak bahaya jestatau beforeEachglobal bocor ke dalam kode produksi;)
Nick Tomlin

Jawaban:

672

Dokumen menunjukkan Anda sekarang dapat menambahkan:

"env": {
    "jest": true
}

Untuk Anda .eslintrcyang akan menambahkan semua hal terkait lelucon ke lingkungan Anda, menghilangkan kesalahan / peringatan linter.

Dave Cooper
sumber
27
Dengan metode ini, penggunaan "jelaskan" atau "itu" di luar file yang cocok dengan pola ".test.js" atau "__tests __ / .js" tidak akan menghasilkan kesalahan linting. Apakah ada cara untuk mencapai hal ini?
n1ru4l
7
@ l0rin Anda dapat menambahkan .eslintrcfile yang memperpanjang default Anda .eslintrcdi __tests__folder Anda . Jika Anda memiliki masalah yang sama dengan OP (folder uji berganda), maka Anda dapat membuatnya .eslintrcdengan templat dan skrip bash kecil (semacamnya ls **/__tests/ | xargs cp templates/.eslintrc)
Ulysse BN
2
tautan terkait di sini
devonj
73

ESLint mendukung ini pada versi> = 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"
      }
    }
  ],
};

Berikut ini solusinya (dari jawaban lain di sini, pilih itu!) Untuk batasan "extended in override" dari eslint config:

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

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

Zachary Ryan Smith
sumber
4
Terima kasih, ini benar-benar solusi yang tepat untuk pertanyaan ini, karena sebenarnya menjawabnya. bekerja untukku!
sra
1
Ini bagus! Dengan memperbarui ESLint saya ke versi> = 4 dan menambahkan a "files"dan "env"objek ke "overrides"dalam, eslint.rcsaya tidak lagi perlu khawatir tentang sintaks spesifik Jest lewat linting di luar file pengujian.
TheDarkIn1978
1
Solusi yang sangat baik dan juga berfungsi untuk kerangka kerja lain (melati) ketika Anda memiliki struktur folder yang tidak standar.
Elliot Nelson
2
Saya orang yang menulis jawaban yang diterima - jawaban ini jauh lebih baik daripada saya! Meskipun pada saat saya menulis jawaban saya, itu adalah satu-satunya cara untuk menyelesaikan masalah ini dengan baik.
Dave Cooper
6
ESLint sekarang mendukung perluasan dalam penggantian
Nick McCurdy
21

Anda juga dapat mengatur test env di file tes Anda sebagai berikut:

/* eslint-env jest */

describe(() => {
  /* ... */
})
HaNdTriX
sumber
13

Untuk melengkapi jawaban Zachary, berikut adalah solusi untuk batasan "extended in override" dari konfigurasi eslint:

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

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

Ricovitch
sumber
2

Konfigurasi berbasis pola dijadwalkan untuk rilis ESLint 2.0.0. Untuk saat ini, Anda harus membuat dua tugas terpisah (seperti yang disebutkan dalam komentar). Satu untuk tes dan satu untuk sisa kode dan menjalankan keduanya, sambil memberikan file .eslintrc yang berbeda.

PS Ada lingkungan bercanda yang akan datang dalam rilis ESLint berikutnya, itu akan mendaftarkan semua global yang diperlukan.

Ilya Volodin
sumber
2

Saya memecahkan masalah REF

Lari

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

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

Dan kemudian tambahkan .eslintrcfile Anda

{
    "extends": ["airbnb","plugin:jest/recommended"],
}
Brance Lee
sumber
1

Tambahkan lingkungan hanya untuk __tests__ folder

Anda dapat menambahkan .eslintrc.ymlfile di __tests__folder Anda , yang memperluas konfigurasi dasar Anda:

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

Jika Anda hanya punya satu __tests__ folder, solusi ini adalah yang terbaik karena ruang lingkup hanya bercanda di mana diperlukan.

Berurusan dengan banyak folder uji

Jika Anda memiliki lebih banyak folder uji (case OPs), saya masih menyarankan untuk menambahkan file-file itu. Dan jika Anda memiliki banyak folder tersebut dapat menambahkannya dengan skrip zsh sederhana:

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

Script ini akan mencari __tests__folder dan menambahkan .eslintrc.ymlfile dengan konfigurasi yang ditunjukkan di atas. Skrip ini harus diluncurkan dalam folder yang berisi orang tua Anda .eslintrc.

Ulysse BN
sumber
1

beberapa jawaban menganggap Anda telah menginstal 'eslint-plugin-jest', namun tanpa perlu melakukan itu, Anda dapat melakukannya di .eslintrcfile Anda , tambahkan:

  "globals": {
    "jest": true,
  }
Sebastian Scholle
sumber
-8

Dalam file .eslintignore Anda, tambahkan nilai berikut:

**/__tests__/

Ini harus mengabaikan semua contoh direktori __tests__ dan anak-anak mereka.

Jason Shimkoski
sumber
4
Itu tidak seperti yang saya inginkan, saya tidak ingin mengabaikan file tes, saya masih ingin membohongi mereka, saya hanya ingin mencari cara menentukan opsi yang diperlukan untuk serat mereka dengan benar.
Retsam
2
Gagasan yang sangat buruk, eslint membantu semua kode - termasuk kode uji.
Daniel Kmak