Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

初めに

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'],
};

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

harukikaneko
まだまだプログラミング初心者です。 バックエンド: Go,Ruby フロントエンド: Vue
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away