Vue テンプレートとスクリプトでエイリアスを使用して vue-jest 設定をマップする方法はありますか?

Question

<p>依存関係: "@vue/cli-plugin-unit-jest": "^4.5.13"、"@vue/test-utils": "^1.2.1"、"vue -冗談": "^3.0.7"

; <p>vue.config.js にエイリアス (たとえば「foo」) を設定するアプリケーションがあります。</p> <pre class="brush:php;toolbar:false;">module.exports = { chainWebpack: (config) => { //プロジェクト名をエイリアスとして設定します config.resolve.alias.set('foo', __dirname); }、 };</pre> <p>import ステートメントと HTML タグの src 属性の場合...</p> <p>main.js 内:</p> <pre class="brush:php;toolbar:false;">... 「foo/src/components/core/App」からアプリをインポートします。 ...</pre> <p> ../src/core/App/index.vue:</p> <pre class="lang-html prettyprint-override"><code><script src="foo/src/components/core/App/script.js" /> <スタイル モジュール src="foo/src/components/core/App/style.css" /> <template src="foo/src/components/core/App/template.html" /> </code></pre> <p>jest.config.js で moduleNameMapper を次のように使用できることはわかっています。</p> <p><code>'^foo(.*)$': '<rootDir>$1',</code></p> <p>ただし、これは HTML タグの src 属性に現れるエイリアスをマッピングしません。構成設定またはその他の手段を通じて、vue-jest にこれらのプロパティ パスを解釈させる方法はありますか? </p> <p>アドバイスをいただければ幸いです。 </p>

Answer 1

SFC での URL 解析

vue-jest SFC のトップレベル ブロック タグの src URL は解決できないため、src/components/core/ で解決する必要があります。 App/index.vue 次の場所でエイリアスなしの相対パスを使用します。 リーリー

テンプレートコンテンツのURL解析

vue-jest@vue/component-compiler-utils を使用してテンプレートをコンパイルしますが、URL 解析には transformAssetUrlsoption が必要です。 vue-jest 3.x は @vue/component-compiler-utils へのオプションの受け渡しをサポートしていませんが、 #4.0.0-rc.1 では # サポートしています ##templateCompiler.transformAssetUrls構成実装。 URL 解析が有効になっている場合でも、Vue CLI 設定 jest

から

は、画像 を含む require のメディアに対して空の文字列を返します。実稼働環境で通常に解析された URL を使用してテストを実行する必要がある場合は、url-loader を模倣する Jest コンバーターが必要になります。 Vue CLI 設定ローダーは、4KB より大きい場合は を含む解析されたファイル名を返し、それ以外の場合は、base64 データ URL を返します。 URL 解析を有効にするには:

vue-jest
1. 4:

   にアップグレードします リーリー

   カスタム
my-jest-url-loader
2. 用に次のファイルを作成します。これは後で使用します:

   リーリー

   Vue CLI のデフォルトの Jest プリセットを誤って上書きしないようにするには、
jest.config.js## でマージ ツール (例:

3. lodash.merge) を使用します。 #カスタム構成を挿入します。

   Jest global
に
4. vue-jest

   構成を追加し、templateCompiler.transformAssetUrls を設定します。 結合プリセットの

   transform
プロパティを変更して、
5. my-jest-url-loader

   コンバータを使用して画像を処理します。これには、競合を避けるために、デフォルトの Jest プリセットから他の画像コンバーターを削除する必要があります。 リーリー

   GitHub デモ