web-dev-qa-db-ja.com

JESTテストでグローバルVue.js変数をモックする方法

アプリの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にモックしようとしましたが（ええ、それはばかげています）、成功しませんでした-私はまだそのエラーを受け取ります-助けてください。

unit-testingvue.jsmockingvuejs2jestjs
9
lukaszkups

これを実現するには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コンポーネントのテストに関連する他の事柄についてサポートが必要です。

2
xenetics

vue-test-utils beta 15 以降で実行できます。

ここ docs

そして、いくつかの例は次のようになります。

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.mocks['$apiUrls'] = {
  ...
}
1
Aldarund

上記の答えはもう機能しないと思います（2020年）。

これが私のために働いたものです：

  1. 新しいファイルを作成し、たとえば名前を付けます。 jest.init.js
  2. 次のコンテンツを提供します。
import { config } from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
  1. これをjest.config.jsに追加します（実際には「rootDir」と記述します。実際のパスに置き換えないでください）
module.exports = {
  setupFiles: ["<rootDir>/jest.init.js"]
}

これらのファイルは、jestが単体テストを実行する前にのみ実行されます。

デフォルトのエクスポートではなく、{config}をインポートしていることに注意してください。デフォルトが機能しなかった理由がわかりません。 vue test utilsのドキュメントでさえデフォルトのエクスポートをインポートしなくなりました

また、古いvue-test-utilsパッケージからインポートしようとしていないことを確認してください。 （新しいものは@vue/test-utilsです）

0
Artur Tagisow