vue-test-utils初使用詳細

vue-test-utils公式サイト：https://vue-test-utils.vuejs.org/zh/
ジェースト公式サイト：https://jestjs.io
依存パケット
それらをインストールしてください👇

yarn add @vue/test-utils vue-jest
yarn jestjest-serializer-vue
yarn add babel-jest babel-core@^7.0.0-bridge.0

⚠️：vue-just依存とbabel-core。私達の環境は今は全部babel 7です。npmによってインストールされたbabel-coreはデフォルトですか？それとも6バージョンですか？だからBabel-coreにインストールされているシリーズを指定します。
設定
just配置：justにどのような追加の構成が必要かを教えます。
just関連の構成は、package.jsonまたは個別のjust.com fig.jsonファイルに配置することができる。

// jest.config.json
{    
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest", // jest  babel  js
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" // jest vue      
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
   ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1", //    webpack   alias  
    "^tim-architect/(.*)$": "<rootDir>/tim-architect/$1"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(yourModuleName))"
  ]
}

⚠️：tranformIgnorePatternsのデフォルトの設定はmodules''は、すべてのnode_を表します。modulesの下のカバンはすべてbabel解析が必要ではありません。しかし、いくつかの3 rdライブラリが提供しているファイルはまだコンパイルされていないes 6文法で、justは解析時に文法エラーを報告します。したがって、ホワイトリストを指定する必要があります。それらのnode_が必要です。modulesの下のカバンはbabelに変換されます。
babelの配置：babelはどのようなツールで山を処理する必要があるかを教えます。💩香ですか？💩 ： 💩 ）コード
Babel.co.nfig.js（babelの変換が必要なnode u）をオススメします。modulesも同様に有効です。babelrcではありません。

{
  ...,
 env: {
  test: {
   presets: [[
    '@babel/env',
    {
     modules: 'auto', //       webpack   s6 module，    babel   ，     
     targets: {
      node: 'current' //        node  ，            
     }
    }
   ]],
   plugins: [[
    '@babel/plugin-transform-runtime', {
     corejs: 2,
     useESModules: false //      es modules，babel    @babel/plugin-transform-modules-commonjs es module   commonjs    
    }
   ]
  ]
 }
 }
}

⚠️：babelのenv.testでjustテストに必要なbabel配置を指定します（webpack変換解析とは異なります）。justはenv.testの配置を自動的に認識します。
単一測定ファイル
理解:

ユニットテストはコードのカバー率を追求すべきではない。

ユニットテストは主にコンポーネントUIをテストするためであり、データ駆動後のUIの変化は制御可能範囲内である。

テストコンポーネントは、純粋なコンポーネントを中心として（業務コンポーネントの論理が複雑すぎたり、頻繁に変動したりして、関連する導入ファイルが多すぎて、すべての機能性をテストするのに不便です）、純粋なコンポーネントは、プロジェクトの基本的なコンポーネントとしての機能性はほとんど変わりません。

出会った問題のまとめ
1.非同期ライフサイクル
vue-test-utilsは、非同期要求方法のmockを提供しています。文書は以下の通りです。
ライフサイクル関数が非同期の場合はどうしますか？以下は自分で測って効果がありますが、ちょっと面倒な姿勢です。

//             ，      init，      jest.fn()       mock
init.default = jest.fn().mockImplementation(() => Promise.resolve(yourValue))

//  Jest        ，           ，                
beforeEach(async () => {
 init.default.mockClear()
 await wrapper.vm.$mount() //           init  
})

2.テストファイルにrequire.com textが含まれているなら、これを見てください。
この時webpackがないですが、どうすればいいですか？もちろん他の人が穴を踏んだことがある方法で急場を救うのです。
正直に言うと、コンポーネントがこのようなものを引用したら、それはあまり純粋ではないと思います。それを気にしないでください。
なぜこの問題を解決しますか？今後はjsファイルをテストする必要があると思いますが、コードライン数をカバーするテストもありますので、解決してください。
実は考え方は簡単です。私達は全体の局面でrequire.co.textを書き直す必要があります。babelはまたrequire.com textに会ったら間違いないと思います。

//   ，       ，          ：babel-plugin-require-context-hook
//  babel.config.js env.test       
...
plugins: [..., 'require-context-hook']
...

//  jest.config.json     setupFiles 
// setupFiles                 
...
"setupFiles": ["<rootDir>/.jest/register-context.js"],
...

//   .jest/register-context.js  ，          
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

3.テストプロセスは、importが解析できないというような、synax errorを常に報告します。
兄弟は、バベルの配置が正しいかどうかを確認し、バベルのバージョンをインストールしたとしか言えません。この問題が発生した時は、babelはes 6文法を解析していないと説明しました。
（依存パッケージのインストール元が同じであることを確認し、yarnを使用することを推奨します）

ifはnode_です。modulesの中のファイルは招いて、配置を通じてtranformIgnorePatternsはbabelにその解析が必要なモジュールを教えます。

else ifはプロジェクトのファイルであるので、自分のbabel.co.fig.js（不確実性を確保する.babelrcファイル）が正しく配置されているかどうかを確認します。@babel/prest-envを使ったら、moduleパラメータの配置に注意してください。

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。