Edited at

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

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