Merge pull request #443 from t-kurasawa/issues/319

.babelrc

@@ -0,0 +1,13 @@
+// .babelrc
+{
+  "presets": [
+    "vue",
+    "@babel/preset-typescript",
+    ["@babel/preset-env", { "modules": "commonjs" }]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-async-to-generator"
+  ]
+}

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': '@vue/vue2-jest',
+  },
+  moduleNameMapper: {
+    '^~/(.*)$': '<rootDir>/$1',
+  },
+  testMatch: ['<rootDir>/test/**/*.spec.js'],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+};

package.json

@@ -12,7 +12,8 @@
     "generate": "nuxt generate",
     "createtiles": "node createtiles.js",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "dev-debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt"
+    "dev-debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",
+    "test": "jest"
   },
   "browserslist": [
     "last 2 version",
@@ -39,11 +40,27 @@
     "vue-mapbox": "^0.4.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-async-to-generator": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-typescript": "^7.23.3",
+    "@nuxt/test-utils": "^3.9.0",
     "@nuxt/typescript-build": "^0.2.10",
     "@nuxtjs/eslint-config": "^1.0.1",
     "@nuxtjs/eslint-module": "^1.2.0",
     "@types/geojson": "^7946.0.7",
+    "@types/jest": "^29.5.11",
+    "@vue/compiler-dom": "^3.4.5",
+    "@vue/server-renderer": "^3.4.5",
+    "@vue/server-test-utils": "1",
+    "@vue/test-utils": "1",
+    "@vue/vue2-jest": "28",
+    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.7.0",
+    "babel-preset-vue": "^2.0.2",
     "cross-env": "^6.0.3",
     "css-mqpacker": "^7.0.0",
     "eslint": "^6.8.0",
@@ -52,13 +69,21 @@
     "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-vue": "^7.7.0",
     "fs": "0.0.1-security",
+    "jest": "^29.7.0",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-serializer-vue": "^3.1.0",
+    "jsdom": "^23.0.1",
+    "jsdom-global": "^3.0.2",
     "pug": "^3.0.2",
     "pug-loader": "^2.4.0",
     "pug-plain-loader": "^1.1.0",
     "sass": "^1.69.6",
     "sass-loader": "^10.0.4",
     "shelljs": "^0.8.5",
     "sort-css-media-queries": "^1.5.4",
-    "ts-loader": "^6.2.2"
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^6.2.2",
+    "typescript": "^5.3.3"
   }
 }

test/README.md

@@ -0,0 +1,93 @@
+[Vue コンポーネントを jest でテストできるようにする](https://github.com/codeforjapan/mapprint/issues/319)
+
+## 要望の概要 | What
+
+Vue に対してのテストコード環境を構築する。
+個別のテスト作成は別 issue で取り組む。
+
+## なぜやるのか | Why
+
+本リポジトリは１～２年おきに発生する大規模な災害時に活用されている。
+災害発生の頻度と利用しているライブラリのバージョンサイクルのズレが発生し、まず最初にバージョンアップなどを行う必要がでてくる。そういった際にテストコードがあることでデグレードのリスクを抑えて複数人によるコントリビューションができる環境を準備したい。
+
+## どうやるのか | How
+
+### テストライブラリ
+
+Vue2 と Vue3 ではテストライブラリのバージョンが異なる。Vue2 に合わせる。
+テスト用にインストールしたライブラリは以下。
+
+```
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-async-to-generator": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-typescript": "^7.23.3",
+    "@nuxt/test-utils": "^3.9.0",
+    "@types/jest": "^29.5.11",
+    "@vue/compiler-dom": "^3.4.5",
+    "@vue/server-renderer": "^3.4.5",
+    "@vue/server-test-utils": "1",
+    "@vue/test-utils": "1",
+    "@vue/vue2-jest": "28",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^29.7.0",
+    "babel-preset-vue": "^2.0.2",
+    "jest": "^29.7.0",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-serializer-vue": "^3.1.0",
+    "jsdom": "^23.0.1",
+    "jsdom-global": "^3.0.2",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.3.3"
+```
+
+#### 注意点１
+
+vue2-jest@28 を指定すること。transform の記載方法がバージョンによって異なる。
+
+https://github.com/vuejs/vue-jest
+
+#### 注意点２
+
+以下２つは合わせること
+@vue/test-utils@1
+@vue/server-test-utils@1
+
+https://github.com/vuejs/vue-test-utils/
+
+### 設定ファイル郡
+
+- jest.config.js ： Vue2 で jest を動かすための設定を書いています。
+- .babelrc ： jest 実行時にバベルで ECMAScript から CommonJS に変換しています。
+
+### テスト実施方法
+
+テストコマンドを実行してください。
+
+```
+$ yarn test
+
+yarn run v1.22.17
+$ jest
+ PASS  test/components/Logo.vue.spec.js
+ PASS  test/lib/displayHelper.spec.js
+
+Test Suites: 2 passed, 2 total
+Tests:       4 passed, 4 total
+Snapshots:   0 total
+Time:        5.031 s
+Ran all test suites.
+Done in 6.35s.
+```
+
+### サンプルテストコード
+
+- js/ts ファイル　：　 jest のみ利用。関数に対してテストコードを書きます。
+  - 例）test/lib/displayHelper.spec.js
+- vue ファイル　：　@vue/test-utils を利用。Vue がレンダリングする仮想 DOM （\*1）に対してテストコードを書きます。
+  - 例）test/components/Logo.vue.spec.js
+
+（\*1）jest.config.js にて「testEnvironment: 'jsdom'」を指定して仮想 DOM を jest から扱えるようにしています。

test/components/Logo.vue.spec.js

@@ -0,0 +1,24 @@
+// Import the required libraries
+import { mount } from '@vue/test-utils';
+import TestComponent from '~/components/Logo.vue';
+
+// Describe the test suite
+describe('TestComponent', () => {
+  // Test if the component renders correctly
+  it('renders the component', () => {
+    const wrapper = mount(TestComponent);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  // You can add more specific tests for your component's behavior here
+  // For example, testing the presence and styling of individual triangles
+
+  it('contains four triangles with correct styling', () => {
+    const wrapper = mount(TestComponent);
+    const triangles = wrapper.findAll('.Triangle');
+
+    expect(triangles).toHaveLength(4);
+  });
+
+  // Add more tests as needed
+});

test/lib/displayHelper.spec.js

@@ -0,0 +1,16 @@
+import { getNowYMD } from '~/lib/displayHelper';
+
+describe('getNowYMD', () => {
+  test('returns the formatted date in Japanese by default', () => {
+    const mockDate = new Date('2022-01-05T12:34:56');
+    const result = getNowYMD(mockDate);
+    expect(result).toBe('2022年01月05日12時34分');
+  });
+
+  test('returns the formatted date in English when locale is set to "en"', () => {
+    const mockDate = new Date('2022-01-05T12:34:56');
+    const result = getNowYMD(mockDate, 'en');
+    const expected = mockDate.toLocaleString('en-US');
+    expect(result).toBe(expected);
+  });
+});