diff --git a/docs/ja/README.md b/docs/ja/README.md index 67e5eeb2d..a38668eb7 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -20,9 +20,9 @@ すでに webpack に精通している場合は、次の説明を省略してもかまいません。しかし、webpack を初めて使う人のために、ここで簡単な紹介を行います。 -[webpack](http://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。 +[webpack](https://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。 -![webpack](http://webpack.github.io/assets/what-is-webpack.png) +![webpack](https://webpack.github.io/assets/what-is-webpack.png) 基本的な例として、CommonJS モジュールが多数あるとします。これらはブラウザで直接実行できません。なのでそれらを ` -``` - -モックをインポートする方法は次のとおりです: - -> 注意: inject-loader@3.x は現在 unstable です。 - -``` bash -npm install inject-loader@^2.0.0 --save-dev -``` - -``` js -// example.spec.js -const ExampleInjector = require('!!vue-loader?inject!./example.vue') -``` - -注意。狂気じみた文字列を必要とします - ここではいくつかのインライン [webpack loader](https://webpack.github.io/docs/loaders.html) を使用しています。簡単な説明としては: - -- `!!`は "グローバル設定からすべてのローダを無効にする"ことを意味します; -- `vue-loader?inject!` は `vue-loader` を使い、`?inject` クエリを渡す"ことを意味します。 これは `vue-loader` に、依存性注入モードでコンポーネントをコンパイルするように指示します。 - -返される `ExampleInjector` は、`example.vue` モジュールのインスタンスを生成するために呼び出すことができるファクトリ関数です: - -``` js -const ExampleWithMocks = ExampleInjector({ - // モック - '../service': { - msg: 'Hello from a mocked service!' - } -}) -``` - -最後に、コンポーネントを通常どおりテストすることができます: - -``` js -it('should render', () => { - const vm = new Vue({ - template: '
', - components: { - 'test': ExampleWithMocks - } - }).$mount() - expect(vm.$el.querySelector('.msg').textContent).toBe('Hello from a mocked service!') -}) -``` diff --git a/docs/ja/workflow/testing.md b/docs/ja/workflow/testing.md index 7d5fb830d..3b22e87e3 100644 --- a/docs/ja/workflow/testing.md +++ b/docs/ja/workflow/testing.md @@ -1,101 +1,4 @@ # テスト -> [webpack vue-cli テンプレート](https://github.com/vuejs-templates/webpack)には、事前に設定された単体テストと e2e テストの設定が用意されています。 - -`* .vue`ファイルをテストするときには、普通の CommonJS ベースのテストランナーを使うことができません。なぜならそのテストランナーは `*.vue` ファイルの扱い方を知らないからです。代わりに、webpack + vue-loader を使用してテストファイルをバンドルします。推奨設定は [Karma](http://karma-runner.github.io/0.13/index.html) と [karma-webpack](https://github.com/webpack/karma-webpack) です。 - -Karma はブラウザを起動してテストを実行するテストランナーです。テストするブラウザと、使用するテストフレームワーク(たとえば、MochaやJasmineなど)を選択できます。[PhantomJS](http://phantomjs.org/) のテストを[Jasmine](http://jasmine.github.io/edge/introduction.html) テストフレームワークで実行する Karma の設定例を次に示します: - -``` bash -npm install\ - karma karma-webpack\ - karma-jasmine jasmine-core\ - karma-phantomjs-launcher phantomjs-prebuilt\ - --save-dev -``` - -``` js -// 要求があれば同じwebpackの設定を使用することが可能です -// ただし、テスト中に元のエントリが不要なので、 -// 元のエントリを削除することを忘れないでください -var webpackConfig = require('./webpack.config.js') -delete webpackConfig.entry - -// karma.conf.js -module.exports = function (config) { - config.set({ - browsers: ['PhantomJS'], - frameworks: ['jasmine'], - // これはすべてのテストのエントリーファイルです。 - files: ['test/index.js'], - // バンドルのためにエントリーファイルをwebpackに渡します。 - preprocessors: { - 'test/index.js': ['webpack'] - }, - // webpackの設定を使用します - webpack: webpackConfig, - // 不要なテキスト出力を回避します - webpackMiddleware: { - noInfo: true - }, - singleRun: true - }) -} -``` - -そして`test/index.js`ファイルのエントリの場合: - -``` js -// test/index.js -// 特別なwebpackの機能を使用してすべてのテストファイルを必要とさせます -// https://webpack.github.io/docs/context.html#require-context -var testsContext = require.context('.', true, /\.spec$/) -testsContext.keys().forEach(testsContext) -``` - -このエントリファイルは、単に同じフォルダ内の `.spec.js` で終わる他のすべてのファイルを必要とします。これで実際にいくつかのテストを書くことができます: - -``` js -// test/component-a.spec.js -var Vue = require('vue') -var ComponentA = require('../../src/components/a.vue') - -describe('a.vue', function () { - - // JavaScriptのオプションのアサーション - it('should have correct message', function () { - expect(ComponentA.data().msg).toBe('Hello from Component A!') - }) - - // 実際にコンポーネントをレンダリングしてレンダリングされた結果をアサートします - it('should render correct message', function () { - var vm = new Vue({ - template: '
', - components: { - 'test': ComponentA - } - }).$mount() - expect(vm.$el.querySelector('h2.red').textContent).toBe('Hello from Component A!') - }) -}) -``` - -テストを実行するには、次の NPM スクリプトを追加します: - -``` js -// package.json -... -"scripts": { - ... - "test": "karma start karma.conf.js" -} -... -``` - -最後に実行します: - -``` bash -npm test -``` - -最後にもう一度、[こちらを参照してください](https://github.com/vuejs-templates/webpack)。テストに関する完全な実例が含まれています。 +- [@vue/cli](https://github.com/vuejs/vue-cli) は事前に設定されたユニットテストと e2e テストのセットアップを提供します。 +- `* .vue` ファイルのユニットテストを手動で設定する場合は、[`@vue/test-utils` のドキュメント](https://vue-test-utils.vuejs.org/ja/)を参照してください。