Vue.jsでコンポーネントを入れ子にするとUnit Testでワーニングがでて煩わしい

概要

コンポーネントを入れ子にするとUnit Testで以下のようなメッセージが表示されるのだけど、繰り返しテストをするときに煩わしいので、黙らせたかった。

[vue-test-utils]: The child component has been modified to ensure it is created with properties injected by Vue
Test Utils.

再現手順

Vue.jsのプロジェクトを作成するところから。Dockerで環境作ってますがローカルで実行しても問題ありません、。言語はTypeScriptです。

GitHubに利用したプロジェクトをUPしています。環境構築が面倒！けど試したい///という方はどうぞ。
https://github.com/kai-kou/vue-js-unit-test-stub-warning

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml

Dockerfile

FROM node:10.8.0-stretch

RUN npm install --global @vue/cli

WORKDIR /projects

docker-compose.yml

version: '3'

services:
  app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - ".:/projects"
    tty: true

> docker-compose up -d
> docker-compose exec app bash

テストしたいので、? Pick a unit testing solution: でMocha を選んでくださいね。言語もTypeScriptで。

コンテナ内

> vue create app

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn

最初からあるHelloWorldコンポーネントを利用するコンポーネントを作成します。

> touch src/components/Parent.vue
> vi src/components/Parent.vue

src/components/Parent.vue

<template>
  <div>
    <HelloWorld msg="hoge" />
  </div>
</template>

<script lang="ts">
  import {
    Component,
    Prop,
    Vue,
  } from 'vue-property-decorator';
  import HelloWorld from '@/components/HelloWorld.vue';

  @Component({
    components: {
      HelloWorld,
    },
  })
  export default class Parent extends Vue {}
</script>

で、単体テストを用意します。

> touch tests/unit/Parent.spec.ts
> vi tests/unit/Parent.spec.ts

tests/unit/Parent.spec.ts

import { shallowMount } from '@vue/test-utils';
import Parent from '@/components/Parent.vue';

describe('Parent.vue', () => {
  it('コンポーネントを入れ子にすると警告がでる？', () => {
    const wrapper = shallowMount(Parent, {});
    wrapper.is(Parent);
  });
});

検証

この時点ではまだメッセージはでません。

コンテナ内

> yarn test:unit

 MOCHA  Testing...

  Parent.vue
    ✓ コンポーネントを入れ子にすると警告がでる？ (320ms)


  1 passing (595ms)

 MOCHA  Tests completed successfully

では、再現のため、Parentコンポーネントを利用するコンポーネントを作成します。

> touch src/components/GrandFather.vue
> vi src/components/GrandFather.vue

src/components/GrandFather.vue

<template>
    <div>
        <parent/>
    </div>
</template>

<script lang="ts">
  import {
    Component,
    Prop,
    Vue,
  } from 'vue-property-decorator';
  import Parent from '@/components/Parent.vue';

  @Component({
    components: {
      Parent,
    },
  })
  export default class GrandFather extends Vue {}
</script>

で単体テストを用意します。

> touch tests/unit/GrandFather.spec.ts
> vi tests/unit/GrandFather.spec.ts

tests/unit/GrandFather.spec.ts

import { shallowMount } from '@vue/test-utils';
import GrandFather from '@/components/GrandFather.vue';

describe('GrandFather.vue', () => {
  it('コンポーネントを入れ子にすると警告がでる？', () => {
    const wrapper = shallowMount(GrandFather, {});
    wrapper.is(GrandFather);
  });
});

> yarn test:unit

MOCHA Testing...

GrandFather.vue
[vue-test-utils]: The child component has been modified to ensure it is created with properties injected by Vue Test Utils.
This is because the component was created with Vue.extend, or uses the Vue Class Component decorator.
Because the component has been modified, it is not possible to find it with a component selector. To find the component, you must stub it manually using the stubs mounting option, or use a name or ref selector.
You can hide this warning by setting the Vue Test Utils config.logModifiedComponents option to false.
✓ コンポーネントを入れ子にすると警告がでる？ (253ms)

1 passing (268ms)

MOCHA Tests completed successfully

ぐぬぬ、1度ならまだしも。毎回でると煩わしいのです。

黙らせる方法

メッセージにもあるとおり、config.logModifiedComponents を利用します。

> vi tests/unit/GrandFather.spec.ts

tests/unit/GrandFather.spec.ts

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, config } from '@vue/test-utils';
import GrandFather from '@/components/GrandFather.vue';
+config.logModifiedComponents = false;

これで、表示は消えるものの、コンポーネントが増えると面倒ですねー。
他に良い方法はないものなのでしょうか。

Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7

元記事はこちら

「Vue.jsでコンポーネントを入れ子にするとUnit Testでワーニングがでて煩わしい」