Nuxt.js+TypeScript+Vutify(2.0)+Jestの環境設定

初めに

Nuxtの初めのcreateなどはこちらから初めて下さい。
また、自分用の環境セットのメモのつもりで書いています。

package.json

*一度yarn upgrade --latest を実行しています。

package.json

{
  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "test": "jest",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/vuetify": "1.0.0",　                    /*以前のバージョンから大幅にアップデートが掛かっているので注意して下さい */
    "@types/webpack": "^4.32.0",
    "@typescript-eslint/eslint-plugin": "^1.13.0",
    "@typescript-eslint/parser": "^1.13.0",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "nuxt": "^2.8.1",
    "nuxt-fontawesome": "^0.4.0",
    "sass-loader": "^7.1.0",
    "sinon-chai": "^3.3.0",
    "ts-node": "^8.3.0",
    "vue": "^2.6.10",
    "vue-class-component": "^7.1.0",
    "vue-property-decorator": "^8.2.1",
    "vuex": "^3.1.1",
    "vuex-class": "^0.3.2",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@mdi/font": "^3.8.95",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^0.2.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.8.0",
    "babel-preset-env": "^1.7.0",
    "cypress": "^3.4.0",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-airbnb-base": "^13.2.0",
    "eslint-config-airbnb-vue": "^2.0.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-config-standard": ">=13.0.1",
    "eslint-plugin-import": ">=2.18.2",
    "eslint-plugin-jest": ">=22.13.0",
    "eslint-plugin-node": ">=9.1.0",
    "eslint-plugin-nuxt": ">=0.4.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-promise": ">=4.2.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^24.8.0",
    "nodemon": "^1.19.1",
    "prettier": "^1.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-jest": "^24.0.2",
    "typescript": "^3.5.3",
    "vue-jest": "^3.0.4"
  }
}

tsconfig.json

TypeScriptを使いたいのでtsconfigを設定します。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app",
      "@types/jest",
      "cypress"
    ]
  }
}

nuxt.config.ts

nuxt createした際のデフォルトの設定もあります。

nuxt.config.ts

import colors from 'vuetify/es5/util/colors'
import NuxtConfiguration from '@nuxt/config'

const nuxtConfig: NuxtConfiguration = {
  build: {
    extend (config, {isClient}) {
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
};

export default {
  mode: 'spa',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
,
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/axios'
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    theme: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3
    },
    icons: {
      iconfont: 'mdi',
    },
  },
  axios: {},
  extensions: ['ts', 'js'],
  srcDir: 'src/'
}

jest

jest.config.js

module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
  testMatch: ['<rootDir>/test/unit/**/*.ts'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.ts?$': 'ts-jest',
  },
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json',
    },
  },
  collectCoverage: true,
  collectCoverageFrom: ['<rootDir>/src/components/**/*.vue', '<rootDir>/src/pages/**/*.vue'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  coverageReporters: ['html', 'text-summary'],
};

間違っているような設定があるかもしれませんが、ご容赦ください。