VueのテストUtilsのを学びます

私は、ライトユニットテスト、特にフロントエンドUIのユニットテスト、一体何ができないため、TDDの長い時間のための愛が、本当に、それを使ったことがありませんか？

最後に、私がしようと決定しました。ただ単に問題への本のRANの動作の一例に従う、知っているシンプルな感じが良い、読書、本テストVue.jsアプリケーションを探し始めます。私は、私はちょうど、実行、知っているので、ハイエンドの品質のネットワーク天国の雰囲気が依存関係をインストールするために私を導い失敗につながっ問題があるではない、または何か他のもの、私が試してみましたcnpm、この種の問題は常にありません章-2、チャプター-3常に私は最終的にこの本のテストVue.js適用が先送りに置くことを決めた、失敗し、何度も何度VueのテストUtilsの公式サイトのドキュメントを置きます。

関連するいくつかのものを一覧表示するには、フォローアップも必要ありません。

ビュー
テストビューUtilsの
その他
期待します
VUE-A
バベルは、あります
あり
バベル
チャイ
WebPACKの
糸

導入冗談

次はVUEプロジェクトをビルドするためにゼロからスタートして、[構成冗談します

WebPACKの-単純なプロジェクトを作成します

vue init webpack-simple simple
cd simple
npm i

インストール@ VUE /テスト-utilsの冗談

npm i --save-dev @vue/test-utils jest

設定スクリプト

// package.json
...
"scripts": {
...
"test": "jest"
...
}
...

HelloWorld.vueを追加し、テストファイルを追加HelloWorld.spec.js

// src/HelloWorld.vue
<template>
<div>{{ msg }}</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Hello World!'
			}
		}
	}
</script>

// src/__test__/HelloWorld.spec.js
空

NPMの実行テストを実行してみてください、私たちは次のエラーを取得します

FAIL  src/__test__/HelloWorld.spec.js
  ● Test suite failed to run

    Plugin/Preset files are not allowed to export objects, only functions. In D:\zheteng\vuetestdemo\simple2\node_modules\babel-preset-stage-3\lib\index.js

      at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
      at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
          at Array.map (<anonymous>)
      at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
      at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
      at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
      at mergeChainOpts (node_modules/@babel/core/lib/config/config-chain.js:320:26)
      at node_modules/@babel/core/lib/config/config-chain.js:283:7
      at buildRootChain (node_modules/@babel/core/lib/config/config-chain.js:120:22)
      at loadPrivatePartialConfig (node_modules/@babel/core/lib/config/partial.js:85:55)

本当にそれは読むことはできません！おおよその推測では、バベルの問題があります。私はコメントアウト何かにファイルを.babelrc行ってきました。実際には、その私がコメントアウト殺傷.babelrcに直接行くことができないことをいくつかのものがありますが、私はVueのテストUtilsの文書が行われた例を比較しました。
ここに画像を挿入説明

{
  "presets": [
    ["env", { 
      // "modules": false 
      }]/*,
    "stage-3"*/
  ]
}

再びNPM実行テスト、エラーが変更を実行する

テストファイルが何かを追加するためのものではありませんので、

describe('HelloWorld.vue', () => {
	it('sanity test', () => {
	
	})
})

成功

それをテストHelloWorld.vue

import HelloWorld from '../HelloWorld.vue'
import { mount } from '@vue/test-utils'
describe('HelloWorld.vue', () => {
  it('sanity test', () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.vm.msg).toBe('Hello World!')
  })
})

NPM走行テストを実行し、さらに与えられています
ここに画像を挿入説明

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files,
ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom
"transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

それでも私はまだこのエラーをインストールし、その後、それはおそらく、インポート、それを知らない、なぜ、この時間は、私はそれのバベル、冗談だと思う知っている、としていない、崩壊しました。
私はそれを考えるこの時間はVUE-冗談を、.vueは知りませんする必要があり、それについて考えてみよう。その死んだ馬の生活馬の医者それ。
次に、以下のようにも行う予定のconfigure冗談に必要な、または別の設定ファイルpackage.jsonに、私はpackage.jsonに書きました

...
"jest": {
	"transform": {
		"^.+\\.js": "<rootDir>/node_modules/babel-jest",
		".*\\.(vue)$": "vue-jest"
	}
}
...

NPM走行テスト
キック呼び出し、それ日

プロジェクトが直接VUE-cliを作成したユニットテストを実行しました

vue init webpack vue-demo

これは、1ページのアプリケーションVUEを作成し、作成プロセス中かどうかのユニットテストを選択することが可能となります。ファイル名を指定して実行NPMの実行ユニットは、ユニットテストを実行することができます。彼はただ与えられている理由が、残念ながら私にはわかりません
ここに画像を挿入説明

FAIL  test\unit\specs\HelloWorld.spec.js
  ● Test suite failed to run

    SecurityError: localStorage is not available for opaque origins

      at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
          at Array.forEach (<anonymous>)

知恵を検索するオンラインに行く、これはなぜ私にはわからないと言い、最後に誰かがHTTPにtestURLに言った：// localhost /を十分。'：内のsrc /ユニット/ jest.conf.jsでtestURLを追加して、のように：// localhostの/ HTTP'

// src/unit/jest.conf.js 这是jest的配置文件
...
testURL: 'http://localhost/'
...

私にはわからない、なぜ、そのようなプレーに関しては、私は冗談を理解していません。フォローアップを見冗談文書がフラグを立て、今は明らかです。// TODO：冗談ドキュメント

それは良い人がいる場合は、すべてのより良い私に言うことを私は知らない何を、私たちは知っている将来的に願っていますので、この問題は、プロジェクトの足場VUEによって作成されるべきでないことを理由に立っている:)

私は最終的に章-3例のテストVue.js応用が駆け上がってみましょう:)

2019年5月30日
私は戻って保持していない、--chapter-3のテストVue.js応用例章IIIを実行するために、再試行してください。

再クローンクローンgitのhttps://github.com/eddyerburgh/vue-hackernews
インストールの依存関係、cnpm I
ファイル名を指定して実行NPMの実行テスト：ユニット、のlocalStorageは不透明な起源には使用できません。このエラーを取得し、私は漠然と覚えて、私は間違いありませんが、私は厄介だ章-3にチャプター-2から切り替える必要がありました。とにかく、私はこのエラーを解決する方法を知って、楽器は言われています！
成功したことが判明したユニット、Yuningチョーク：実行NPMの実行テストで

継続するには。。。

nothing_more_than

公開された53元の記事・ウォン称賛39 ・ビュー80000 +

プライベートの手紙の懸念