|
1 | 1 | # Vuex と一緒に使用する
|
2 | 2 |
|
3 |
| -このガイドでは、vue-test-utils でコンポーネントで Vuex をテストする方法について、見ていきます。 |
| 3 | +このガイドでは、`vue-test-utils` でコンポーネントで Vuex をテストする方法について、見ていきます。 |
4 | 4 |
|
5 | 5 | ## アクションのモック
|
6 | 6 |
|
@@ -91,17 +91,17 @@ describe('Actions.vue', () => {
|
91 | 91 | })
|
92 | 92 | ```
|
93 | 93 |
|
94 |
| -ここでは何が起こっているでしょうか?まず、Vue に Vue.use メソッドを使用して Vuex を使用するように支持しています。これは、単なる Vue.use のラッパです。 |
| 94 | +ここでは何が起こっているでしょうか?まず、Vue に `Vue.use` メソッドを使用して Vuex を使用するように指示しています。これは、単なる `Vue.use` のラッパです。 |
95 | 95 |
|
96 |
| -次に、新しい Vuex.store をモックされた値で呼び出すことによってモックストアを呼び出します。それは全て気にすることであるので、それをアクションに渡すだけです。 |
| 96 | +次に、新しい `Vuex.store` をモックされた値で呼び出すことによってモックストアを呼び出します。それは全て気にすることであるので、それをアクションに渡すだけです。 |
97 | 97 |
|
98 |
| -アクションは、[jest のモック関数](https://facebook.github.io/jest/docs/en/mock-functions.html)です。これらモック関数は、アクションが呼び出された、または呼び出されていない、かどうかを検証するメソッドを提供します。 |
| 98 | +アクションは、[Jest のモック関数](https://facebook.github.io/jest/docs/en/mock-functions.html)です。これらモック関数は、アクションが呼び出された、または呼び出されていない、かどうかを検証するメソッドを提供します。 |
99 | 99 |
|
100 | 100 | アクションのスタブが期待どおりに呼び出されたことを検討することができます。
|
101 | 101 |
|
102 | 102 | 今、ストアを定義する方法が、あなたには少し外に見えるかもしれません。
|
103 | 103 |
|
104 |
| -各テストより前にストアをクリーンに保証するために、beofreEach を使用しています。beforeEach は各テストより前に呼び出される mocha のフックです。このテストでは、ストア変数に値を再度割り当てています。これをしていない場合は、モック関数は自動的にリセットされる必要があります。また、テストにおいて状態を変更することもできますが、この方法は、後のテストで影響を与えることはないです。 |
| 104 | +各テストより前にストアをクリーンに保証するために、`beforeEach` を使用しています。`beforeEach` は各テストより前に呼び出される Mocha のフックです。このテストでは、ストア変数に値を再度割り当てています。これをしていない場合は、モック関数は自動的にリセットされる必要があります。また、テストにおいて状態を変更することもできますが、この方法は、後のテストで影響を与えることはないです。 |
105 | 105 |
|
106 | 106 | このテストで最も重要なことは、**モック Vuex ストアを作成し、それを vue-test-utils に渡す** ことです。
|
107 | 107 |
|
@@ -130,7 +130,7 @@ export default{
|
130 | 130 | </script>
|
131 | 131 | ```
|
132 | 132 |
|
133 |
| -これは、かなり単純なコンポーネントです。ゲッタによる clicks の結果と inputValue を描画します。また、これらゲッタが返す値については実際に気にしません。それらの結果が正しく描画されているかだけです。 |
| 133 | +これは、かなり単純なコンポーネントです。ゲッタによる `clicks` の結果と `inputValue` を描画します。また、これらゲッタが返す値については実際に気にしません。それらの結果が正しく描画されているかだけです。 |
134 | 134 |
|
135 | 135 | テストを見てみましょう:
|
136 | 136 |
|
@@ -172,7 +172,7 @@ describe('Getters.vue', () => {
|
172 | 172 | })
|
173 | 173 | ```
|
174 | 174 |
|
175 |
| -このテストはアクションのテストに似ています。各テストの前にモックストアを作成し、shallow を呼び出すときにオプションを渡し、そしてモックゲッタから返された値を描画されているのを検証します。 |
| 175 | +このテストはアクションのテストに似ています。各テストの前にモックストアを作成し、`shallow` を呼び出すときにオプションを渡し、そしてモックゲッタから返された値を描画されているのを検証します。 |
176 | 176 |
|
177 | 177 | これは素晴らしいですが、もしゲッタが状態の正しい部分を返しているのを確認したい場合はどうしますか?
|
178 | 178 |
|
|
0 commit comments