インストール

モジュールをインストールします 

  1. npm install @wordpress/jest-preset-default --save-dev

注意: このパッケージは、長期サポートステータスのあるNode.jsバージョンを必要とします（アクティブLTSまたはメンテナンスLTSリリースを確認）。古いバージョンとは互換性がありません。

セットアップ

jest.config.jsonまたはpackage.jsonのjestフィールドを介して

  1. {
  2.    "preset": "@wordpress/jest-preset-default"
  3. }

使用法

含まれるオプションの簡単な説明

  • moduleNameMapper – すべてのcssおよびscssファイルに含まれるCSSスタイルはスタブ化されます。
  • modulePaths – プロジェクトのルートディレクトリがモジュールを解決する際の検索場所として使用されます。
  • setupFiles – 各テストの前に実行され、テスト環境で必要なグローバル変数を設定するコードが実行されます。
  • setupFilesAfterEnv – 各テストの前に、ConsoleオブジェクトおよびReactコンポーネントのテストフレームワークへのサポートを改善するコードが実行されます。
  • testEnvironment – すべてのテストに対してjsdom環境がデフォルトで有効になります。
  • testMatch – /test/および/__tests__/サブフォルダー内のテストを検索し、.test.*サフィックスを持つすべてのファイルにも一致します。.js、.jsx、.ts、または.tsxサフィックスを持つテストファイルを検出します。デフォルトのJest構成と比較して、.spec.*サフィックスを持つファイルには一致しません。
  • testPathIgnorePatterns – テストファイルを検索する際にnode_modulesおよびvendorディレクトリを除外します。
  • transform – デフォルトのbabel-jestトランスフォーマーを保持します。

enzymeの使用

歴史的に、このパッケージはenzymeを使用していましたが、@testing-library/reactに対するサポートが削除され、主な理由はReact 18へのアップグレードを妨げないためです。

enzymeを使用したい場合は、以下の手順に従ってReact 17アダプターを手動で提供することで、引き続き使用できます。

enzyme依存関係をインストールするには、次のコマンドを実行します: 

  1. npm install --save enzyme

React 17アダプター依存関係をインストールするには、次のコマンドを実行します: 

  1. npm install --save @wojtekmaj/enzyme-adapter-react-17

React 17アダプターを使用するには、setupFilesAfterEnv設定でこれを使用します: 

  1. // It "mocks" enzyme, so that we can delay loading of
  2. // the utility functions until enzyme is imported in tests.
  3. // Props to @gdborton for sharing this technique in his article:
  4. // https://medium.com/airbnb-engineering/unlocking-test-performance-migrating-from-mocha-to-jest-2796c508ec50.
  5. let mockEnzymeSetup = false;
  7. jest.mock( 'enzyme', () => {
  8.    const actualEnzyme = jest.requireActual( 'enzyme' );
  9.    if ( ! mockEnzymeSetup ) {
  10.    mockEnzymeSetup = true;
  12.    // Configure enzyme 3 for React, from docs: http://airbnb.io/enzyme/docs/installation/index.html
  13.    const Adapter = jest.requireActual(
  14.    '@wojtekmaj/enzyme-adapter-react-17'
  15.    );
  16.    actualEnzyme.configure( { adapter: new Adapter() } );
  17.    }
  18.    return actualEnzyme;
  19. } );
  2. 依存関係をインストールするには、次のコマンドを実行します:  
  5. ``````bash
  6. npm install --save enzyme-to-json
  7. `

最後に、snapshotSerializersの配列にenzyme-to-json/serializerを追加する必要があります: 

  1. {
  2.    snapshotSerializers: [ 'enzyme-to-json/serializer' ];
  3. }

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主な貢献者ガイドをお読みください。