Zenn
Closed9

Vite+React環境にJestのセットアップをする

React
TypeScript
Jest
Vite
Yuta OhiraYuta Ohira

testing-libraryをインストール

yarn add -D @testing-library/react @testing-library/jest-dom
Yuta OhiraYuta Ohira

以下のようなエラーが発生したので、babelを導入する。

発生したエラー
Support for the experimental syntax 'jsx' isn't currently enabled

yarn add -D babel-jest @babel/preset-env @babel/preset-react
touch babel.config.js
babel.config.js
module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
}
Yuta OhiraYuta Ohira

jestの設定もしておく必要がある

touch jest.config.js

テストのファイルが、.tsまたは.tsxの時に、ts-jestを使用するように設定している。また、typescriptの設定ファイル（tsconfig.json）も読み込んでいる。

jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
}
Yuta OhiraYuta Ohira

エイリアスの設定をJest側でもしないといけない。

発生しているエラー
Cannot find module '~/pages' from 'src/router/routes.tsx'
jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
+  moduleNameMapper: {
+    '^~/(.+)': '<rootDir>/src/$1',
+  },
}
Yuta OhiraYuta Ohira

svgファイルがうまく読み込めず、エラーが発生

発生しているエラー
***/src/assets/logo.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">

SyntaxError: Unexpected token '<'

      4 |
    > 5 | import logo from '~/assets/logo.svg'
        | ^

mkdir -p jest
touch jest/cssTransform.js jest/svgTransform.js
jest/cssTransform.js
module.exports = {
  process() {
    return 'module.exports = {};'
  },
  getCacheKey() {
    // The output is always the same.
    return 'cssTransform'
  },
}
jest/svgTransform.js
module.exports = {
  process() {
    return 'module.exports = {};'
  },
  getCacheKey() {
    // The output is always the same.
    return 'svgTransform'
  },
}
jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
+    '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
  moduleNameMapper: {
    '^~/(.+)': '<rootDir>/src/$1',
  },
}
Yuta OhiraYuta Ohira
発生しているエラー
● renders learn react link

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined

jest.config.jsにjsdomの指定をする必要がある

jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
    '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
  moduleNameMapper: {
    '^~/(.+)': '<rootDir>/src/$1',
  },
+  testEnvironment: 'jsdom',
}
Yuta OhiraYuta Ohira
発生しているエラー
TypeError: expect(...).toBeInTheDocument is not a function

@testing-library/reactをセットアップ時に読み込む必要がある

touch jest.setup.ts
jest.setup.ts
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'
jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.svg$': '<rootDir>/jest/svgTransform.js',
    '^.+\\.css$': '<rootDir>/jest/cssTransform.js',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
  moduleNameMapper: {
    '^~/(.+)': '<rootDir>/src/$1',
  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jsdom',
}
このスクラップは2021/12/21にクローズされました