ESLintでJestの ‘test’ や ‘expect’ が未定義エラーになる問題の解決方法(xx is not defined)

はじめに

かなり時間がかかったので、メモに残します。

問題

Jestを使ったテストコードを書いているときに、ESLintで ‘test’ や ‘expect’ が未定義エラーになった
xx is not defined

vsコード

解決方法

ESLintがJestのグローバル変数を認識していないため
eslint.config.jsに以下を加える

globals: {
  ...globals.browser,
  ...globals.jest
},

エラーを解決できたコード

eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import jest from 'eslint-plugin-jest'

export default [{
               ignores: ['dist']
       },
       {
               files: ['**/*.{js,jsx}'],
               languageOptions: {
                       ecmaVersion: 2020,
                       globals: {
                               ...globals.browser,
                               ...globals.jest
                       },
                       parserOptions: {
                               ecmaVersion: 'latest',
                               ecmaFeatures: {
                                       jsx: true
                               },
                               sourceType: 'module',
                       },
               },
               settings: {
                       react: {
                               version: '18.3.1'
                       }
               },
               plugins: {
                       react,
                       'react-hooks': reactHooks,
                       'react-refresh': reactRefresh,
                       'jest': jest
               },
               rules: {
                       ...js.configs.recommended.rules,
                       ...react.configs.recommended.rules,
                       ...react.configs['jsx-runtime'].rules,
                       ...reactHooks.configs.recommended.rules,
                       'react/jsx-no-target-blank': 'off',
                       'react-refresh/only-export-components': [
                               'warn',
                               {
                                       allowConstantExport: true
                               },
                       ],
                       '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'
               },
       },
]

おわりに

vsコードに聞いて闇雲に解決しようとしてもダメでした。
eslint.config.jsの他に、eslintrc.cjsというファイルを作ってしまったりして訳がわからなくなりました。
chatGPTに聞くときは、そのコード1行1行に何の意味があるのかを確認しなければならないと思いました。