アプリのURLを含むグローバルプロパティ/変数があります:
Vue.prototype.$apiUrls = {
root: 'http://localhost:8080/',
api: 'api/v1/'
// etc.
}
コンポーネント内でaxiosリクエストとして使用します。
axios.get(`${this.$apiUrls.root}${this.$apiUrls.api}/users/`)
コンポーネントのコードをテストしたいので、すでにaxios
をモックしましたが、それでもエラーが発生します。
TypeError: Cannot read property '$apiUrls' of undefined
このプロパティを各テスト内および/またはJESTのセットアップファイルで定義/モックしようとしました。
global.$apiUrls = {...}
// or
Vue.prototype.$apiUrls = {...}
// or
Object.defineProperties(Vue.prototype, {$apiUrls: {...}})
私もそれをwindow
またはthis
にモックしようとしましたが(ええ、それはばかげています)、成功しませんでした-私はまだそのエラーを受け取ります-助けてください。
これを実現するには2つの方法があります。 1つは、@ Aldarundで言及されているように、Config
オプションを使用することです。あなたはそれについて読むことができます ここ 。
Jestを使用している場合は、jest.init.js
ファイルでこれを行うことをお勧めします。
import VueTestUtils from '@vue/test-utils'
VueTestUtils.config.mocks['$apiUrls'] = {
'some/endpoint'
}
次に、これをpackage.json
のjest
セクションに追加します。
"setupFiles": [
"<rootDir>/jest.init.js"
]
今では世界的に嘲笑されています。テストごとにこれを実行する場合は、mocks
マウントオプションを使用できます。
const wrapper = shallowMount(Foo, {
mocks: {
$apiUrls: 'some/endpoint'
}
})
うまくいけば、これが役立ちます!
興味があれば、テスト方法に関する簡単なガイドのコレクションを編集していますVueコンポーネント ここ 。開発中ですが、問題が発生した場合はお気軽に質問してください。 Vueコンポーネントのテストに関連する他の事柄についてサポートが必要です。
vue-test-utils beta 15 以降で実行できます。
ここ docs
そして、いくつかの例は次のようになります。
import VueTestUtils from '@vue/test-utils'
VueTestUtils.config.mocks['$apiUrls'] = {
...
}
上記の答えはもう機能しないと思います(2020年)。
これが私のために働いたものです:
jest.init.js
import { config } from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
jest.config.js
に追加します(実際には「rootDir」と記述します。実際のパスに置き換えないでください)module.exports = {
setupFiles: ["<rootDir>/jest.init.js"]
}
これらのファイルは、jestが単体テストを実行する前にのみ実行されます。
デフォルトのエクスポートではなく、{config}
をインポートしていることに注意してください。デフォルトが機能しなかった理由がわかりません。 vue test utilsのドキュメントでさえデフォルトのエクスポートをインポートしなくなりました
また、古いvue-test-utils
パッケージからインポートしようとしていないことを確認してください。 (新しいものは@vue/test-utils
です)