share facebook facebook twitter menu hatena pocket slack

2018.09.19 WED

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

甲斐 甲

WRITTEN BY 甲斐 甲

概要

コンポーネントを入れ子にすると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でワーニングがでて煩わしい

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。