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