Vue-Jest自動テストの基本構成の詳しい説明

プロジェクトに必要な機能を確認してください:
 ◉ Vueのバージョンを選択
 ◉ バベル
❯◉ タイプスクリプト
 ◯ プログレッシブウェブアプリ（PWA）のサポート
 ◉ ルーター
 ◉ ヴュークス
 ◯ CSSプリプロセッサ
 ◯ リンター/フォーマッター
 ◉ ユニットテスト
 ◯ E2Eテスト

? ユニットテストソリューションを選択する: Jest
Babel、ESLintなどの設定はどこに置きますか？専用のコンソールに
図ファイル

モジュール.エクスポート = {
  プリセット: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}

モジュール.エクスポート = {
  moduleFileExtensions: [ // テストファイルタイプ 'js',
    'jsx',
    'json',
    // Jest に *.vue ファイルを処理するように指示する
    'ビュー'、
    'ts'、
    'tsx'
  ]、
  transform: { // 変換メソッド // vue-jest で *.vue ファイルを処理する
    '^.+\\.vue$': require.resolve('vue-jest'),
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    require.resolve('jest-transform-stub')、
    '^.+\\.jsx?$': require.resolve('babel-jest'),
    '^.+\\.tsx?$': require.resolve('ts-jest'),
  },
  transformIgnorePatterns: ['/node_modules/'], // 変換中にnode_modulesを無視する
  // ソースコード内で同じ @ -> src エイリアスマッピングをサポートする
  moduleNameMapper: { // @ シンボルは現在のプロジェクトの src を示します
    '^@/(.*)$': '<ルートディレクトリ>/src/$1'
  },
  テスト環境: 'jest-environment-jsdom-fifteen'、
  // スナップショットのシリアライザー
  snapshotSerializers: [ // スナップショット設定 'jest-serializer-vue'
  ]、
  testMatch: [ // デフォルトのテストファイル '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__テスト__/*.[jt]s?(x)'
  ]、
  // https://github.com/facebook/jest/issues/6766
  テストURL: 'http://localhost/',
  ウォッチプラグイン: [
    require.resolve('jest-watch-typeahead/ファイル名')、
    require.resolve('jest-watch-typeahead/テスト名')
  ]、
  グローバル:
    'ts-jest': {
      バベル設定: true
    }
  }
}

 /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    デフォルトの normalizeComponent をエクスポートします。
    ^^^^^^

    構文エラー: 予期しないトークン 'export'

変身：
     '^.+\\.mjs$': 'バベルの冗談'
}

    次のことが可能です:
     • 「node_modules」ファイルの一部を変換するには、設定でカスタム「transformIgnorePatterns」を指定します。
     • カスタム変換が必要な場合は、設定で「transform」オプションを指定します。
     • JS 以外のモジュール (バイナリ アセットなど) を単にモック化したい場合は、「moduleNameMapper」構成オプションを使用してスタブ化できます。

    これらの設定オプションの詳細と例については、次のドキュメントを参照してください。
    詳しくはこちら

    詳細：

    /Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    デフォルトの normalizeComponent をエクスポートします。
    ^^^^^^

    構文エラー: 予期しないトークン 'export'

変換無視パターン: [
    // 変換時に node_modules を無視しますが、vue-runtime-helpers は含めません
    '/node_modules/(?!(vue-runtime-helpers)/)',
  ]、

 TypeScript 診断 (`[jest-config].globals.ts-jest.diagnostics` オプションを使用してカスタマイズ):
    src/views/inventory-map/__tests__/available.spec.ts:15:1 - エラー TS2304: 名前 'beforeEach' が見つかりません。

    15 beforeEach(() => {
       ~~~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:19:1 - エラー TS2593: 名前 'describe' が見つかりません。テスト ランナーの型定義をインストールする必要がありますか? `npm i @types/jest` または `npm i @types/mocha` を試してから、tsconfig の types フィールドに `jest` または `mocha` を追加してください。

    19 記述('在庫マップ', () => {
       ~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:20:3 - エラー TS2593: 名前 'it' が見つかりません。テスト ランナーの型定義をインストールする必要がありますか? `npm i @types/jest` または `npm i @types/mocha` を試してから、tsconfig の types フィールドに `jest` または `mocha` を追加してください。

{
    "コンパイラオプション": {
    "種類"： [
      "webpack-env",
      "冗談"
    ]、
  }
}

_localVue をインスタンス化します。
_localVue.use(Vuex);
_localVue.use(UI);
_localVue.use(i18nインストール);
_localVue.component('s-filter', SFilter);
_localVue.component('w-table', WTable);
_localVue.directive('xxx', {
  挿入: (el, バインディング) => {
    ....
  },
});
エクスポート const localVue = _localVue;

'./enums' から列挙型をインポートします。
エクスポートconst systemStore = new Vuex.Store({
  アクション: {},
  州： {
    列挙型: {
      systemEnums: 列挙型、
    },
  },
});

'@/utils/unit-test/common' から localVue、systemStore をインポートします。
'@vue/test-utils' から { mount } をインポートします。
require('intersection-observer'); // jsdom と互換性がありますが、IntersectionObserver はサポートしていません
import TaskList from '../available-inventory-map/index.vue'; // テスト対象のビジネスを参照します let store: any;
それぞれの前に(() => {
  ストア = systemStore;
});

'在庫マップ' を記述します () => {
  it('フィルター項目テスト', () => {
    レンダラーを作成します。
    const wrapper = mount(TaskList, {
      ローカルビュー、
      店、
      ドキュメントに添付: true、
    });
    const html = wrapper.html(); // 完全な HTML 構造を取得します。const vm = wrapper.vm; // コンポーネント インスタンス console.log(html, vm);
  })
}