Nuxt.jsͰ
 TypeScriptͱJSXͱJest ੢෢࢙ !@UBLFTIJ@ גࣜձࣾEJ⒎FBTZ
 औక໾$50 (8%@/VMBC

੢෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU &MJYJS Թઘ ϥϯχϯά -5͓͡͞Μ ಡॻ ম೑͓͡͞Μ

/VYUKT

/VYUKT w7VFKTΞϓϦέʔγϣϯ։ൃͷ ͨΊͷϑϨʔϜϫʔΫ ✦ ϧʔςΟϯά7VF3PVUFS ✦ ঢ়ଶ؅ཧ7VFY 7VF൛'MVY ✦ 443 ɹʜͳͲ

5ZQF4DSJQU

5ZQF4DSJQU w+BWB4DSJQUͷεʔύʔηοτ wলུՄೳͳ੩తܕ෇͚ wΫϥεϕʔεΦϒδΣΫτࢦ޲ w/VYUKT7FS͔Β5ZQF4DSJQUαϙʔτ

+49

+49 wʮ+BWB4DSJQUF9UFOTJPOʯͷུ wςϯϓϨʔτͰ͸ͳ͘ɺ+BWB4DSJQUͷه๏ wओʹ3FBDUͰར༻ render(h: Vue.CreateElement): Vue.VNode { return ( ) }

+49ΩϞ͍ʁ ೥ͷࢲɾɾɾ +49ΩϞͬʂʂ

+49ͳͥΩϞ͍ʁ ϩδοΫͱσβΠϯͷ෼཭ ˠ+49ΩϞͬʂʂ ˠ+49͋Γʂʁ ߏ଄ɾݟͨ໨ɾৼΔ෣͍͕ηοτ ίϯϙʔωϯτࢤ޲

+FTU

+FTU w+BWB4DSJQUͷϢχοτςετπʔϧ w7VF5FTU6UJMTͱ࿈ܞ

࣮ࡍʹ࡞ͬͯΈͨ

/VYUKTΞϓϦ։ൃ wDSFBUFOVYUBQQΛར༻ɹ˞UTະରԠ $ yarn create nuxt-app ɾɾɾ ? Project name nuxt_ts ? Project description My first-class Nuxt.js project ? Use a custom server framework none ? Choose features to install (Press to select, to toggle all, to invert selection) ? Use a custom UI framework none ? Use a custom test framework jest ? Choose rendering mode Single Page App ? Author name takeshi ? Choose a package manager yarn

/VYUKTΞϓϦ։ൃ

OVYUUTʹҠߦ wOPEF@NPEVMFTΛ࡟আ $ rm -rf ./node_modules/ $ rm ./yarn.lock "scripts": { "dev": "nuxt-ts", "build": "nuxt-ts build", "start": "nuxt-ts start", "generate": "nuxt-ts generate", "test": "jest" }, "dependencies": { "cross-env": "^5.2.0", "nuxt-ts": "^2.4.5", "vue-property-decorator": "^8.0.0" }, wOVYUΛ࡟আͯ͠OVYUUTΛ௥Ճ QBDBLHFKTPO

OVYUUTʹҠߦ wUTDPOpHKTPOΛ௥Ճ { "extends": "@nuxt/typescript", "compilerOptions": { "baseUrl": ".", "experimentalDecorators": true, "noImplicitAny": false, "allowJs": true, "types": [ "@types/node", "@nuxt/vue-app" ] } } UTDPOpHKTPO

DPNQPOFOUTͰ +49Λ࢖͏ wUTDPOpHKTPOʹ+49ͷઃఆΛ௥Ճ { "extends": "@nuxt/typescript", "compilerOptions": { "baseUrl": ".", "experimentalDecorators": true, "noImplicitAny": false, "allowJs": true, "module": "commonjs", "jsxFactory": "h", "types": [ "@types/node", "@nuxt/vue-app" ] } } UTDPOpHKTPO

DPNQPOFOUTͰ +49Λ࢖͏ wίϯϙʔωϯτΛ࡞੒ import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { @Prop({ default: 'TypeScript!' }) readonly name!: string message: string = 'Hello, ' render(h: Vue.CreateElement): Vue.VNode { return ( ) } } DPNQPOFOUT)FMMP8PSMEUTY

DPNQPOFOUTͰ +49Λ࢖͏ w1BHFʹ௥Ճ ɾɾɾ ɾɾɾ import HelloWorld from '~/components/HelloWorld.tsx' export default { components: { ɾɾɾ, HelloWorld } } QBHFTJOEFYWVF

5ZQF4DSJQUͱ +49Ͱදࣔ

+FTUͰςετ

wUTKFTUΛ௥Ճ "devDependencies": { "@vue/test-utils": "^1.0.0-beta.27", "babel-core": "7.0.0-bridge.0", "babel-jest": "^24.1.0", "jest": "^24.1.0", "nodemon": "^1.18.9", "ts-jest": "^24.0.0", "vue-jest": "^3.0.3" } QBDBLHFKTPO +FTUΛ 5ZQF4DSJQUͱ +49ʹରԠ

wςετ༻ͷUTDPOpHΛ࡞੒ { "extends": "@nuxt/typescript", "compilerOptions": { "baseUrl": ".", "experimentalDecorators": true, "noImplicitAny": false, "allowJs": true, "jsx": "react", "module": "commonjs", "jsxFactory": "h", "types": [ "@types/node", "@nuxt/vue-app" ] } } UTDPOpHUFTUKTPO +FTUΛ 5ZQF4DSJQUͱ +49ʹରԠ w͜ͷઃఆ͕ͳ͍ͱςετ࣌SFOEFS ͰΤϥʔ wͰ΋ɺ͜ͷઃఆ͕͋Δͱը໘ʹϨ ϯμϦϯά͞Εͳ͍ɾɾ

+FTUΛ 5ZQF4DSJQUͱ +49ʹରԠ wKFTUDPOpHKTʹ5ZQF4DSJQUͱ+49ͷઃఆ௥Ճ module.exports = { globals: { 'ts-jest': { useBabelrc: true, tsConfigFile: 'tsconfig.test.json' } }, ɾɾɾ moduleFileExtensions: ['js', 'vue', 'json', 'tsx'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest', "^.+\\.tsx?$": "ts-jest" }, KFTUDPOpHKT wςετ༻ͷUTDPOpHΛࢦఆ

+FTUΛ 5ZQF4DSJQUͱ +49ʹରԠ wςετΛ࣮ߦ $ yarn test w੒ޭʂʂ

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ