Nuxt.jsで TypeScriptとJSXとJest

Nuxt.js Ver.2.4から
TypeScriptがサポートされるようになりました。
Nuxt.jsでTypeScriptとJSXでコンポーネントを作成し、Jestでテストした内容をまとめました。

Transcript

1. Nuxt.jsͰ
 TypeScriptͱJSXͱJest ੢
   ෢࢙ !@UBLFTIJ@ גࣜձࣾEJ⒎FBTZ
 औక໾$50 (8%@/VMBC
2. ੢
   ෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 'JSFCBTF 7VF (PMBOH 3VCZ ($1 ϒϩοΫνΣʔϯ EPDLFS /VYU &MJYJS Թઘ ϥϯχϯά -5͓͡͞Μ ಡॻ ম೑͓͡͞Μ
3. /VYUKT
4. /VYUKT w7VFKTΞϓϦέʔγϣϯ։ൃͷ ͨΊͷϑϨʔϜϫʔΫ
   ✦ ϧʔςΟϯά
   
   7VF3PVUFS
   ✦ ঢ়ଶ؅ཧ
   
   7VFY
   7VF൛'MVY
   ✦ 443
   ɹʜͳͲ
5. 5ZQF4DSJQU
6. 5ZQF4DSJQU w+BWB4DSJQUͷεʔύʔηοτ
   wলུՄೳͳ੩తܕ෇͚
   wΫϥεϕʔεΦϒδΣΫτࢦ޲
   w/VYUKT
   7FS͔Β5ZQF4DSJQUαϙʔτ
7. +49
8. +49 wʮ+BWB4DSJQU
   F9UFOTJPOʯͷུ
   wςϯϓϨʔτͰ͸ͳ͘ɺ+BWB4DSJQUͷه๏
   wओʹ3FBDUͰར༻ render(h: Vue.CreateElement): Vue.VNode { return ( <div> <p>{this.message} {this.name}</p> </div> ) }
9. +49ΩϞ͍ʁ ೥ͷࢲɾɾɾ +49ΩϞͬʂʂ
10. +49ͳͥΩϞ͍ʁ ϩδοΫͱσβΠϯͷ෼཭ ˠ+49ΩϞͬʂʂ ˠ+49͋Γʂʁ ߏ଄ɾݟͨ໨ɾৼΔ෣͍͕ηοτ ίϯϙʔωϯτࢤ޲
11. +FTU
12. +FTU w+BWB4DSJQUͷϢχοτςετπʔϧ
    w7VF
    5FTU
    6UJMTͱ࿈ܞ
13. ࣮ࡍʹ࡞ͬͯΈͨ
14. /VYUKTΞϓϦ։ൃ wDSFBUFOVYUBQQΛར༻ɹ˞UTະରԠ $ yarn create nuxt-app <my-project> ɾɾɾ ? Project name nuxt_ts ? Project description My first-class Nuxt.js project ? Use a custom server framework none ? Choose features to install (Press <space> to select, <a> to toggle all, <i> 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
15. /VYUKTΞϓϦ։ൃ
16. 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
17. OVYUUTʹҠߦ wUTDPOpHKTPOΛ௥Ճ { "extends": "@nuxt/typescript", "compilerOptions": { "baseUrl": ".", "experimentalDecorators": true, "noImplicitAny": false, "allowJs": true, "types": [ "@types/node", "@nuxt/vue-app" ] } } UTDPOpHKTPO
18. 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
19. 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 ( <div> <p>{this.message} {this.name}</p> </div> ) } } DPNQPOFOUT)FMMP8PSMEUTY
20. DPNQPOFOUTͰ +49Λ࢖͏ w1BHFʹ௥Ճ <template> ɾɾɾ <HelloWorld name="Takeshi"/> ɾɾɾ </template> <script> import HelloWorld from '~/components/HelloWorld.tsx' export default { components: { ɾɾɾ, HelloWorld } } </script> QBHFTJOEFYWVF
21. 5ZQF4DSJQUͱ +49Ͱදࣔ
22. +FTUͰςετ
23. 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ʹରԠ
24. 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Ͱ΋ɺ͜ͷઃఆ͕͋Δͱը໘ʹϨ ϯμϦϯά͞Εͳ͍ɾɾ
25. +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Λࢦఆ
26. +FTUΛ 5ZQF4DSJQUͱ +49ʹରԠ wςετΛ࣮ߦ $ yarn test w੒ޭʂʂ
27. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ