Building Vue Environment Part.1

Building Environment

1. NUXTJS
2. Vuetify
3. Jest

1. NUXTJS

https://ja.nuxtjs.org/docs/2.x/get-started/installation

プロジェクトのセットアップ

$ mkdir <project-name>
$ cd <project-name>
$ touch package.json

▼

$ vim package.json

▼

// package.json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

nuxt のインストール

$ yarn add nuxt

最初のページを作成

$ mkdir pages
$ touch pages/index.vue

▼

$ vim pages/index.vue

▼

// pages/index.vue
<template>
  <h1>Hello world!</h1>
</template>

2. Vuetify

https://vuetifyjs.com/ja/getting-started/installation/

Nuxtでのインストール

$ yarn add @nuxtjs/vuetify -D
$ touch nuxt.config.js

▼

$ vim nuxt.config.js

▼

// nuxt.config.js
export default {
  buildModules: [
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

▼

$ mkdir components
$ touch components/Button.vue

▼

$ vim components/Button.vue

▼

// components/Button.vue
<template>
  <v-btn block>
    Components Button
  </v-btn>
</template>
<script>
  export default {}
</script>

▼

$ vim pages/index.vue

▼

// pages/index.vue
<template>
  <div>
    <Button></Button>
  </div>
</template>
<script>
  import Button from '../components/Button.vue'
  export default {
    components: { Button }
  }
</script>

3. Jest

https://vue-test-utils.vuejs.org/ja/installation/testing-single-file-components-with-jest.html

Jest のセットアップ

$ npm install --save-dev jest @vue/test-utils

▼

$ vim package.json

▼

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

Jest における単一ファイルコンポーネントの処理

$ npm install --save-dev vue-jest

▼

$ vim package.json

▼

// package.json
{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // *.vue ファイルを処理するように Jest に指示する
      "vue"
    ],
    "transform": {
      // vue-jest で *.vue ファイルを処理する
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

Jest のための Babel の設定

$ npm install --save-dev babel-jest

▼

$ vim package.json

▼

// package.json
{
  // ...
  "jest": {
    // ...
    "transform": {
      // ...
      // babel-jest で js を処理する
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
    // ...
  }
}

▼

$ touch babel.config.js

▼

$ vim babel.config.js

▼

// babel.config.js
module.exports = {
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

テストファイルの配置

$ mkdir -p __tests__/pages
$ touch __tests__/pages/index.spec.js

▼

$ vim __tests__/pages/index.spec.js

▼

// __tests__/pages/index.spec.js
import { mount } from  '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import Index from '../../pages/index.vue'

Vue.use(Vuetify)

describe('sample', () => {
  let wrapper
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify
    wrapper = mount(Index, {
      vuetify
    })
  })

  it('test', () => {
    expect(1).toBe(1)
  })
})

Error In Introducing Jest

cf. https://qiita.com/tayama468/items/488162ca6dbd707745cf