why jest

That said, jest is an excellent unit testing option which provides great TypeScript support.
一般的なフォルダ構造は次のとおりです.

反応型スクリプトプロジェクトにjestを導入

CRA-Typescriptプロジェクトにjestを導入

ここのリンクを参照してください
CRAタイプスクリプトアプリケーション酵素とjest

導入する

CRAを使用してプロジェクトを作成する場合は、すべてのテスト機能を実行できます.CRAにはjestが含まれています.

詳細設定については、次を参照してください.

マイニング設定ファイル

jest configurationは、package.jsonで定義することができる.または、設定は、jest.config.jsjest.config.ts--config <path/to/file.js|ts|cjs|mjs|json> optionによってプロジェクトに適用される.

module.exports = {
  preset: 'ts-jest',
  
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
  //왼쪽에서 오른쪽으로 적힌 순서대로
  //Jest가 file extension이 정확한 file extension 없이도 import 를 할 수 잇게 해준다네요?

  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // 경로인식
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
  ],
  // 매치되는 파일만 테스트
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  // 이 문자열과 일치하면 트랜스폼하지않음
};

preset:モジュール識別器

// jest.config.js
{
  "preset": "foo-bar"
}

下図のように.

{
  "preset": "./node_modules/foo-bar/jest-preset.js"
}

moduleFileExtensionモジュールで使用されるファイル拡張子の配列.ファイル拡張子を指定せずにモジュールが必要な場合、Jestは拡張子を左から右の順に検索します.
プロジェクトで最も一般的な展開を左側に配置することをお勧めします.したがって、TypeScriptを使用する場合、「ts」および/または「tsx」を配列の先頭に移動することが考えられる.

transform対応するファイルを必要なモジュールに接続し、変換します.たとえば、最新のjavascriptコードをbabel-jestモジュールに送信して変換します.typescriptの場合、ts-jestを使用して変換されます.

{"\\.[jt]sx?$": "babel-jest"}

moduleNameMapperパス識別器です.パスを登録してください.ここで探します.

testMatchこれはテストファイルを探す方法です.文字列|正規表現に一致するファイルのみをテストします.

transformIgnorePatternsこの属性値(文字列)が一致する場合は、変換は行われません.

Babelインストール(選択)-最新の構文を使用する必要がある場合

過去に導入のような文法はなかったので追加しました.

yarn add --dev babel-jest @babel/core @babel/preset-env

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      
    ],
  ],
};

// jest.config.js
    transform: {
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },

絶対パスアイテムの場合

// craco.config.js

jest: {
    configure: {
   
      moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
      },
      
    },
  },

次の行を追加すると、jest機能を実行するときに絶対パスを認識できます.cracoプロファイルを使用して、実行時にWebパッケージにコンテンツを追加できます.

エラー

describe('snapshot', () => {
  const utils = render(<FactoryDetailPage />);
  expect(utils.container).toMatchSnapshot();
});

入力:

エラー
よく見ると文法が違う.

describe('snapshot', () => {
  it('snapshot', () => {
    const utils = render(<FactoryDetailPage />);
    expect(utils.container).toMatchSnapshot();
  });
});

入力:

良い表現が見られます.文法の間違いに加えて、間違いが発生することもあります.
Jest Test Sweetには、1つ以上のテストが含まれている必要があります.
次のコメントを見てください

ts-jest

ただし、Babel付きTypeScriptを使用する場合、注意すべき点はいくつかあります.BaelではTypeScriptサポートは変換ファイルであるため、Jestは実行時にテストのタイプチェックを行わない.type-checkが必要な場合はts-jestを使用します.
次のコードをテスト

// DeleteButton.test.tsx
describe('snapshot', () => {
  it('snapshot', () => {
    const utils = render(<DeleteButton hi="hi" />);
    // DeleteButton의 인자는 width:string, height:string이다.
    expect(utils.container).toMatchSnapshot();
  });
});

コンパイル側でエラーが発生しますが、タイプチェックが行われていないため、テストに成功しました.


(こんな風に通れないんですよね…)
テスト側はts-jestを使用してタイプチェックを行います.

優先ts-jestインストール.

npm install ts-jest

jest.config.jsファイルの作成

npx ts-jest config:init

次の設定を追加します.

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
  //왼쪽에서 오른쪽으로 적힌 순서대로
  //Jest가 file extension이 정확한 file extension 없이도 import 를 할 수 잇게 해준다네요?

  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // 경로인식
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
  ],
  // 매치되는 파일만 테스트
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  // 이 문자열과 일치하면 트랜스폼하지않음
};

preset実行タイプスクリプトタイプチェック.(テストチームで)

Reference

why jest

jest docs

少なくとも1つのテストを含める必要があります

CRA jest

CRAタイプスクリプトアプリケーション酵素とjest