Nuxt.jsで
TypeScriptとJSXとJest

 Nuxt.jsで
TypeScriptとJSXとJest

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

508d2cf1990876daf4797795a2d81bd2?s=128

TakeshiNishi

March 08, 2019
Tweet

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/VYUKT7FS͔Β5ZQF4DSJQUαϙʔτ

  7. +49

  8. +49 wʮ+BWB4DSJQUF9UFOTJPOʯͷུ 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ͷϢχοτςετπʔϧ w7VF5FTU6UJMTͱ࿈ܞ

  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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ