From a419c383a31b14016204b0323c73b8e2287512fd Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 30 Jul 2023 04:23:47 +0800
Subject: [PATCH] ci: fix typecheck & store test

---
 components/BaseFooter.vue      |  10 +-
 components/ReloadPrompt.vue    |   5 +-
 components/SearchFoodInput.vue |   2 +-
 components/Switch.vue          |   4 +-
 components/WrapperMd.vue       |   2 +-
 components/tags/MeatTag.vue    |   2 +-
 components/tags/StapleTag.vue  |   2 +-
 components/tags/ToolTag.vue    |   2 +-
 composables/store/recipe.ts    |  10 +-
 package.json                   |   1 +
 pnpm-lock.yaml                 | 188 ++++++++++++++++++++++++++++++++-
 scripts/convert.ts             |   4 +-
 test/recipe.test.ts            |  15 +--
 vitest.config.ts               |  11 ++
 14 files changed, 221 insertions(+), 37 deletions(-)
 create mode 100644 vitest.config.ts

diff --git a/components/BaseFooter.vue b/components/BaseFooter.vue
index 58a1c9f..2c9fba7 100644
--- a/components/BaseFooter.vue
+++ b/components/BaseFooter.vue
@@ -11,11 +11,11 @@ onBeforeMount(() => {
 
 const commitSha = (import.meta.env.VITE_COMMIT_REF || '').slice(0, 7)
 const now = import.meta.env.VITE_APP_BUILD_TIME
-const buildDate = (new Date(parseInt(now) * 1000)).toLocaleDateString()
+const buildDate = (new Date(Number.parseInt(now) * 1000)).toLocaleDateString()
 </script>
 
 <template>
-  <div p="4 t-2" class="flex flex-col justify-center items-center" text="sm">
+  <div p="4 t-2" class="flex flex-col items-center justify-center" text="sm">
     <div>
       <a
         m="2"
@@ -50,8 +50,8 @@ const buildDate = (new Date(parseInt(now) * 1000)).toLocaleDateString()
     <a v-if="displayICP" opacity="80" class="flex" href="https://beian.miit.gov.cn/" target="_blank">
       苏ICP备17038157号
     </a>
-    <div m="t-2" class="inline-flex justify-center items-center" text="xs">
-      <a class="inline-flex justify-center items-center" style="color: #ea7b99" href="https://www.bilibili.com/blackboard/dynamic/306882" target="_blank">
+    <div m="t-2" class="inline-flex items-center justify-center" text="xs">
+      <a class="inline-flex items-center justify-center" style="color: #ea7b99" href="https://www.bilibili.com/blackboard/dynamic/306882" target="_blank">
         <span inline-flex>菜谱视频来源：</span>
         <div class="inline-flex" i-ri-bilibili-line />
         <span m="l-1" class="inline-flex" style="margin-top: 1px;">B 站</span>
@@ -64,7 +64,7 @@ const buildDate = (new Date(parseInt(now) * 1000)).toLocaleDateString()
       </a>
       提供 CDN 支持
     </div>
-    <div m="t-2" opacity="80" class="flex justify-center items-center">
+    <div m="t-2" opacity="80" class="flex items-center justify-center">
       ©️&nbsp;<a href="https://github.com/YunYouJun/cook" target="_blank">Cook</a>
       <div text="xs" m="x-1" i-ri-cloud-line />
       <a href="https://www.yunyoujun.cn" target="_blank">云游君</a>
diff --git a/components/ReloadPrompt.vue b/components/ReloadPrompt.vue
index 3b9a20a..b67dac8 100644
--- a/components/ReloadPrompt.vue
+++ b/components/ReloadPrompt.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// @ts-expect-error remove pwa
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
 const {
@@ -17,7 +16,7 @@ async function close() {
 <template>
   <div
     v-if="offlineReady || needRefresh"
-    class="pwa-toast transition shadow-lg hover:shadow-md rounded"
+    class="pwa-toast rounded shadow-lg transition hover:shadow-md"
     border="~ stone-200 dark:stone-600"
     text="center"
     p="4"
@@ -44,7 +43,7 @@ async function close() {
     </button>
     <button
       m="x-2" p="x-4 y-1" text="sm"
-      class="shadow rounded transition active:shadow-md"
+      class="rounded shadow transition active:shadow-md"
       border="~ stone-200 dark:stone-600"
       bg="active:(white opacity-20)"
       @click="close"
diff --git a/components/SearchFoodInput.vue b/components/SearchFoodInput.vue
index bea318d..76154b2 100644
--- a/components/SearchFoodInput.vue
+++ b/components/SearchFoodInput.vue
@@ -24,7 +24,7 @@ const rStore = useRecipeStore()
         text="center"
         bg="transparent"
         border="~ rounded gray-200 dark:gray-700"
-        class="focus:(dark:gray-500)"
+        class="focus:dark:gray-500"
       >
       <label class="hidden" for="input">快速搜索</label>
     </div>
diff --git a/components/Switch.vue b/components/Switch.vue
index 2835a32..de3a067 100644
--- a/components/Switch.vue
+++ b/components/Switch.vue
@@ -6,13 +6,13 @@ defineProps<{
 </script>
 
 <template>
-  <div class="inline-flex justify-center items-center" m="t-2">
+  <div class="inline-flex items-center justify-center" m="t-2">
     <span :class="!strict && 'text-orange-600'" font="bold" m="x-1" @click="toggleStrict(false)">
       模糊匹配
     </span>
     <label m="x-1" class="switch">
       <input :modelValue="strict" type="checkbox" @update:modelValue="toggleStrict">
-      <span class="inline-flex justify-center items-center slider round" />
+      <span class="slider round inline-flex items-center justify-center" />
     </label>
     <span :class="strict && 'text-green-600'" font="bold" m="x-1" @click="toggleStrict(true)">
       精准匹配
diff --git a/components/WrapperMd.vue b/components/WrapperMd.vue
index 7ff78ae..dd537b9 100644
--- a/components/WrapperMd.vue
+++ b/components/WrapperMd.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div m="t-4" class="max-w-900px m-auto text-left">
+  <div m="t-4" class="m-auto max-w-900px text-left">
     <h3 text="center 3xl" font="serif !black">
       {{ frontmatter?.title }}
     </h3>
diff --git a/components/tags/MeatTag.vue b/components/tags/MeatTag.vue
index 68e4388..1ca3bb3 100644
--- a/components/tags/MeatTag.vue
+++ b/components/tags/MeatTag.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <span
-    class="meat-tag tag rounded" p="x-2"
+    class="meat-tag rounded tag" p="x-2"
     border="~ red-200 dark:red-800"
     :bg="active ? 'red-500 opacity-90' : 'red-300 opacity-20'"
     :text="active ? 'red-100' : 'red-800 dark:red-200'"
diff --git a/components/tags/StapleTag.vue b/components/tags/StapleTag.vue
index 0a56a8c..786a75b 100644
--- a/components/tags/StapleTag.vue
+++ b/components/tags/StapleTag.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <span
-    class="tag rounded" p="x-2" border="~ yellow-200 dark:yellow-800"
+    class="rounded tag" p="x-2" border="~ yellow-200 dark:yellow-800"
     :bg="active ? 'yellow-500 dark:yellow-600 opacity-100' : 'yellow-300 opacity-20'"
     :text="active ? 'yellow-100' : 'yellow-800 dark:yellow-200'"
   >
diff --git a/components/tags/ToolTag.vue b/components/tags/ToolTag.vue
index a50b03d..544fa5b 100644
--- a/components/tags/ToolTag.vue
+++ b/components/tags/ToolTag.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <span
-    class="tag rounded" p="x-2"
+    class="rounded tag" p="x-2"
     border="~ stone-200 dark:stone-600"
     :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-5'"
     :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
diff --git a/composables/store/recipe.ts b/composables/store/recipe.ts
index bffb826..b8b063b 100644
--- a/composables/store/recipe.ts
+++ b/composables/store/recipe.ts
@@ -1,10 +1,11 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useGtm } from '@gtm-support/vue-gtm'
+import recipeData from '../../data/recipe.json'
+import type { StuffItem } from '../../data/food'
 import type { RecipeItem, Recipes } from '~/types'
 
-import recipeData from '~/data/recipe.json'
-import type { StuffItem } from '~/data/food'
-
 const namespace = 'cook'
 
 /**
@@ -25,6 +26,7 @@ export type SearchMode = 'survival' | 'loose' | 'strict'
 
 export const useRecipeStore = defineStore('recipe', () => {
   const recipes = recipeData as Recipes
+  const gtm = useGtm()
 
   /**
    * 搜索关键字
@@ -81,8 +83,6 @@ export const useRecipeStore = defineStore('recipe', () => {
 
   const randomRecipe = ref<RecipeItem>(generateRandomRecipe(recipes))
 
-  const gtm = useGtm()
-
   // 默认严格模式
   const displayedRecipe = computed(() => {
     if (keyword.value)
diff --git a/package.json b/package.json
index 95b4969..6f391ff 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "consola": "^3.2.3",
     "cross-env": "^7.0.3",
     "eslint": "^8.45.0",
+    "jsdom": "^22.1.0",
     "nuxt": "^3.6.3",
     "pinia": "^2.1.4",
     "sass": "^1.64.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dee48f4..7892fe9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -82,6 +82,9 @@ devDependencies:
   eslint:
     specifier: ^8.45.0
     version: 8.46.0
+  jsdom:
+    specifier: ^22.1.0
+    version: 22.1.0
   nuxt:
     specifier: ^3.6.3
     version: 3.6.3(@types/node@20.4.5)(eslint@8.46.0)(rollup@2.79.1)(sass@1.64.1)(typescript@5.1.6)(vue-tsc@1.8.8)
@@ -105,7 +108,7 @@ devDependencies:
     version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.4.7)
   vitest:
     specifier: ^0.33.0
-    version: 0.33.0(sass@1.64.1)
+    version: 0.33.0(jsdom@22.1.0)(sass@1.64.1)
   vue-tsc:
     specifier: ^1.8.8
     version: 1.8.8(typescript@5.1.6)
@@ -4144,6 +4147,10 @@ packages:
       - vue
     dev: true
 
+  /abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    dev: true
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -5159,6 +5166,13 @@ packages:
       css-tree: 2.2.1
     dev: true
 
+  /cssstyle@3.0.0:
+    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
+    engines: {node: '>=14'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+    dev: true
+
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
@@ -5171,6 +5185,15 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /data-urls@4.0.0:
+    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
+    engines: {node: '>=14'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+    dev: true
+
   /de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
@@ -5209,6 +5232,10 @@ packages:
       ms: 2.1.2
     dev: true
 
+  /decimal.js@10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: true
+
   /decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
     dependencies:
@@ -5413,6 +5440,13 @@ packages:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: true
 
+  /domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    dependencies:
+      webidl-conversions: 7.0.0
+    dev: true
+
   /domhandler@5.0.3:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
@@ -6832,6 +6866,13 @@ packages:
       lru-cache: 7.18.3
     dev: true
 
+  /html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: true
+
   /html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
@@ -6944,7 +6985,6 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
     dev: true
-    optional: true
 
   /idb@7.1.1:
     resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
@@ -7260,6 +7300,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: true
+
   /is-primitive@3.0.1:
     resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
     engines: {node: '>=0.10.0'}
@@ -7436,6 +7480,44 @@ packages:
       argparse: 2.0.1
     dev: true
 
+  /jsdom@22.1.0:
+    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      cssstyle: 3.0.0
+      data-urls: 4.0.0
+      decimal.js: 10.4.3
+      domexception: 4.0.0
+      form-data: 4.0.0
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.7
+      parse5: 7.1.2
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.3
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+      ws: 8.13.0
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /jsesc@0.5.0:
     resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
     hasBin: true
@@ -8864,6 +8946,10 @@ packages:
       - vue-tsc
     dev: true
 
+  /nwsapi@2.2.7:
+    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
+    dev: true
+
   /nypm@0.2.2:
     resolution: {integrity: sha512-O7bumfWgUXlJefT1Y41SF4vsCvzeUYmnKABuOKStheCObzrkWPDmqJc+RJVU+57oFu9bITcrUq8sKFIHgjCnTg==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -9125,6 +9211,12 @@ packages:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
 
+  /parse5@7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.5.0
+    dev: true
+
   /parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -9659,11 +9751,19 @@ packages:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
     dev: true
 
+  /psl@1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: true
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
     dev: true
 
+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: true
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -10098,6 +10198,10 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rrweb-cssom@0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+    dev: true
+
   /run-applescript@5.0.0:
     resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
     engines: {node: '>=12'}
@@ -10154,7 +10258,6 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     requiresBuild: true
     dev: true
-    optional: true
 
   /sass@1.64.1:
     resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
@@ -10165,6 +10268,13 @@ packages:
       immutable: 4.3.1
       source-map-js: 1.0.2
 
+  /saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: true
+
   /schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -10684,6 +10794,10 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: true
+
   /synckit@0.8.5:
     resolution: {integrity: sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -10843,6 +10957,16 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.0
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: true
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
@@ -10853,6 +10977,13 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /tr46@4.1.1:
+    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
+    engines: {node: '>=14'}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
     dev: true
@@ -11241,6 +11372,11 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: true
 
+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /universalify@2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -11444,6 +11580,13 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: true
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
     dev: true
@@ -11709,7 +11852,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest@0.33.0(sass@1.64.1):
+  /vitest@0.33.0(jsdom@22.1.0)(sass@1.64.1):
     resolution: {integrity: sha512-1CxaugJ50xskkQ0e969R/hW47za4YXDUfWJDxip1hwbnhUjYolpfUn2AMOulqG/Dtd9WYAtkHmM/m3yKVrEejQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -11753,6 +11896,7 @@ packages:
       cac: 6.7.14
       chai: 4.3.7
       debug: 4.3.4
+      jsdom: 22.1.0
       local-pkg: 0.4.3
       magic-string: 0.30.2
       pathe: 1.1.1
@@ -11905,6 +12049,13 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
+  /w3c-xmlserializer@4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: true
+
   /wait-on@7.0.1:
     resolution: {integrity: sha512-9AnJE9qTjRQOlTZIldAaf/da2eW0eSRSgcqq85mXQja/DW3MriHxkpODDSUEg+Gri/rKEcXUZHe+cevvYItaog==}
     engines: {node: '>=12.0.0'}
@@ -11944,6 +12095,11 @@ packages:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
     dev: true
 
+  /webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: true
+
   /webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -11993,6 +12149,26 @@ packages:
       - uglify-js
     dev: true
 
+  /whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
+  /whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /whatwg-url@12.0.1:
+    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      tr46: 4.1.1
+      webidl-conversions: 7.0.0
+    dev: true
+
   /whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -12266,6 +12442,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: true
+
   /xmlhttprequest-ssl@2.0.0:
     resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
     engines: {node: '>=0.4.0'}
diff --git a/scripts/convert.ts b/scripts/convert.ts
index 4ff7952..92ab784 100644
--- a/scripts/convert.ts
+++ b/scripts/convert.ts
@@ -3,7 +3,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import url from 'node:url'
 import consola from 'consola'
-import type { Recipe, RecipeItem } from '../types'
+import type { RecipeItem, Recipes } from '../types'
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 const recipeCsvFile = path.resolve(__dirname, '../data/recipe.csv')
@@ -19,7 +19,7 @@ function run() {
     return
   }
 
-  const recipeJson: Recipe = []
+  const recipeJson: Recipes = []
   const sep = '、'
 
   lines.slice(1).forEach((line) => {
diff --git a/test/recipe.test.ts b/test/recipe.test.ts
index adde6fa..f9210b2 100644
--- a/test/recipe.test.ts
+++ b/test/recipe.test.ts
@@ -1,10 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { createPinia, setActivePinia } from 'pinia'
-import { useRecipe } from 'composables/recipe'
-import type { Recipes } from '~/types'
-import recipeData from '~/data/recipe.json'
-
-const recipe = ref<Recipes>(recipeData as Recipes)
+import { useRecipeStore } from '../composables/store'
 
 describe('recipe interaction', () => {
   beforeEach(() => {
@@ -38,7 +34,6 @@ describe('recipe mode', () => {
 
   it('loose mode', () => {
     const rStore = useRecipeStore()
-    const { displayedRecipe } = useRecipe(recipe)
 
     rStore.reset()
     rStore.addStuff('土豆')
@@ -49,7 +44,7 @@ describe('recipe mode', () => {
     expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
     rStore.setMode('strict')
 
-    displayedRecipe.value.forEach((item) => {
+    rStore.displayedRecipe.forEach((item) => {
       expect(item.stuff.includes('土豆') || item.stuff.includes('腊肠')).toBe(true)
       expect(item.tools?.includes('电饭煲')).toBe(true)
     })
@@ -57,7 +52,6 @@ describe('recipe mode', () => {
 
   it('strict mode', () => {
     const rStore = useRecipeStore()
-    const { displayedRecipe } = useRecipe(recipe)
 
     rStore.reset()
     rStore.addStuff('土豆')
@@ -68,7 +62,7 @@ describe('recipe mode', () => {
     expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
     rStore.setMode('strict')
 
-    displayedRecipe.value.forEach((item) => {
+    rStore.displayedRecipe.forEach((item) => {
       expect(item.stuff.includes('土豆') && item.stuff.includes('腊肠')).toBe(true)
       expect(item.tools?.includes('电饭煲')).toBe(true)
     })
@@ -76,7 +70,6 @@ describe('recipe mode', () => {
 
   it('survival mode', () => {
     const rStore = useRecipeStore()
-    const { displayedRecipe } = useRecipe(recipe)
 
     rStore.reset()
     rStore.addStuff('土豆')
@@ -85,7 +78,7 @@ describe('recipe mode', () => {
     expect(rStore.selectedStuff).toStrictEqual(['土豆', '腊肠'])
     rStore.setMode('survival')
 
-    displayedRecipe.value.forEach((item) => {
+    rStore.displayedRecipe.forEach((item) => {
       const filtered = item.stuff.every(stuff => rStore.selectedStuff.includes(stuff))
       expect(filtered).toBe(true)
     })
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..062d119
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['test/**/*.test.ts'],
+    environment: 'jsdom',
+    deps: {
+      inline: ['@vue', '@vueuse', 'vue-demi'],
+    },
+  },
+})