Mochaテストを使用してvue3cliプロジェクトを作成しました。
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
次に、Visual Codeで、Mocha Test Explorer拡張機能をインストールし、再起動して、フォルダーをワークスペースに追加し、フォルダーctrl-shift-pとMocha Test Explorer：「ワークスペースフォルダーを有効にする」をクリックします。箱から出して、Mocha Test Explorerはvuecliのexample.spec.jsテストを好まないようです：
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
このエントリをsettings.jsonに追加して、テストエクスプローラーがデフォルトの「test」とは異なるvue「tests」フォルダーを見つけるようにします。
"mochaExplorer.files": ["tests/**/*.spec.js"],
そして、テストエクスプローラーでこのエラーを受け取ります。
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
これは、いくつかのトランスパイル作業が必要であることを示しています。MochaTestExplorerは、settings.jsonの「mochaTestExplorer」フィールドをその方法として示していますが、必要なbabelパッケージの組み合わせがわかりません。Visual StudioCodeのMochaTest Explorerで、このすぐに使用できるvue-cli-3テストを実行するにはどうすればよいですか？これが私の現在の推測です：
"mochaExplorer.require": [
"@babel/preset-env",
"@babel/register",
"@babel/polyfill",
"@babel/plugin-transform-runtime"
],
私はあなたが望むことは不可能だと思います-問題はバベルを正しくセットアップするのに十分ではないということです。Vue単一ファイルコンポーネント（.vue）は、WebpackローダープラグインであるVueローダーによって処理される必要があります。
そして、このスレッドで作者自身が示したように、Webpackを使用するようにMocha TestExplorerをセットアップする簡単な方法はありません-vuecliプロジェクトのサポート
そこで、テストを2つのグループtests/ui（Vueコンポーネントを使用したテスト）とtests/unit（非UIテスト）に分割し、Fernandoが説明したセットアップを次のように変更して使用することにしました。
UI以外のテストのみを検索するようにMochaTestExplorerを構成します。
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json：
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...コマンドラインからテストを実行するときに両方のフォルダーを含める
注：最後のステップである変更babel.config.jsは必要ありません。変更しなくてもすべて正常に機能します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加