import path from 'path'
import { defineConfig } from 'vitest/config'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  test: {
    globals: true,
    environment: 'happy-dom',
    server: {
      deps: {
        inline: ['vuetify']
      }
    },
    testTimeout: 10000, // NOTE: 5秒（デフォルト）だとタイムアウトする場合がある為
    // hookTimeout: 10000,
    // teardownTimeout: 10000,
    setupFiles: ['./test/setup.ts']
  },
  plugins: [
    Vue({
      template: {
        compilerOptions: {
          // NOTE: Failed to resolve component
          isCustomElement: tag => ['NuxtLayout', 'NuxtPage', 'Head', 'Title', 'Meta'].includes(tag)
        }
      }
    })
  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './')
    }
  }
})

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  }
}

- import Vue from 'vue'
- import Vuetify from 'vuetify'
- import { config, RouterLinkStub } from '@vue/test-utils'
- import { TestPluginUtils } from '~/plugins/utils.js'
import { config, RouterLinkStub } from '@vue/test-utils'
import { vuetify } from '~/plugins/vuetify'
import helper from '~/test/helper'
import { TestPluginUtils } from '~/plugins/utils'

// NOTE: 他のテストの影響を受けないようにする
afterEach(() => {
  vi.restoreAllMocks()
})

- Vue.use(Vuetify)
// Vuetify
global.ResizeObserver = require('resize-observer-polyfill')
config.global.plugins = [vuetify]

- Vue.use(TestPluginUtils)

- // Mock Config/i18n
- const envConfig = require('~/config/test.js')
- const commonConfig = require('~/config/common.js')
- const locales = require('~/locales/ja.js')
- config.mocks = {
-   $config: Object.assign(envConfig, commonConfig),
-   $t: (key) => {
-     let locale = locales
-     const parts = key.split('.')
-     for (const part of parts) {
-       locale = locale[part]
-     }
-     // eslint-disable-next-line no-throw-literal
-     if (locale == null) { throw `Not found: i18n(${key})` }
-     return locale
-   }
- }
// Mock Config/i18n/utils
config.global.mocks = {
  $config: { public: Object.assign(helper.envConfig, helper.commonConfig, { env: { production: false, test: true } }) },
  $t: (key: string) => {
    let locale: any = helper.locales
    const parts = key.split('.')
    for (const part of parts) {
      locale = locale[part]
      // eslint-disable-next-line no-throw-literal
      if (locale == null) { throw `Not found: i18n(${key})` }
    }
    // eslint-disable-next-line no-throw-literal
    if (typeof locale !== 'string') { throw `Type error: i18n(${key})` }
    return locale
  },
  $tm: (key: string) => {
    let locale: any = helper.locales
    const parts = key.split('.')
    for (const part of parts) {
      locale = locale[part]
      // eslint-disable-next-line no-throw-literal
      if (locale == null) { throw `Not found: i18n(${key})` }
    }
    return locale
  },
  ...TestPluginUtils
}
vi.stubGlobal('useRuntimeConfig', vi.fn(() => config.global.mocks.$config))
vi.stubGlobal('useI18n', vi.fn(() => ({ t: config.global.mocks.$t })))

- // Stub NuxtLink
- config.stubs.NuxtLink = RouterLinkStub
// NOTE: Failed to resolve component: NuxtLink
config.global.stubs.NuxtLink = RouterLinkStub

export const TestPluginUtils = {
-  install (Vue: any) {
-    Vue.prototype.$sleep = sleep
-    Vue.prototype.$dateFormat = dateFormat
-    Vue.prototype.$textTruncate = textTruncate
-  }
+  $sleep: sleep,
+  $dateFormat: dateFormat,
+  $textTruncate: textTruncate
}

  "scripts": {

+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.4",
    "@vitest/coverage-v8": "^0.34.3",
    "@vue/test-utils": "^2.4.1",
    "happy-dom": "^11.0.2",
    "resize-observer-polyfill": "^1.5.1",
    "vitest": "^0.34.4",

- import Vuetify from 'vuetify'
- import { createLocalVue, mount } from '@vue/test-utils'
+ import { mount } from '@vue/test-utils'
import IndexSignUp from '~/components/index/SignUp.vue'
import IndexInfomations from '~/components/index/Infomations.vue'
import Page from '~/pages/index.vue'

describe('index.vue', () => {
-  const mountFunction = (loggedIn) => {
+  const mountFunction = (loggedIn: boolean) => {
-    const localVue = createLocalVue()
-    const vuetify = new Vuetify()
    const wrapper = mount(Page, {
-      localVue,
-      vuetify,
+      global: {
        stubs: {

        },
        mocks: {

        }
+      }

+ import { ref } from 'vue'

describe('index.vue', () => {
  const mountFunction = (loggedIn) => {
+    vi.stubGlobal('useAuthState', vi.fn(() => ({ status: ref(loggedIn ? 'authenticated' : 'unauthenticated') })))

    const wrapper = mount(Page, {

- const { status: authStatus } = useAuthState()

export default {
  computed: {
    loggedIn () {
+      const { status: authStatus } = useAuthState()
      return authStatus.value === 'authenticated'
    }

- const { status: authStatus, data: authData } = useAuthState()
-> 使用するメソッドの中に移動

-    loggedIn () {
-      return authStatus.value === 'authenticated'
-    },
-    authData () {
-      return authData.value
-    },

-        authData.value = data
+        this.$auth.setData(data)

import { defineNuxtComponent } from '#app'

import path from 'path'
import { defineConfig } from 'vitest/config'
import Vue from '@vitejs/plugin-vue'
+ import AutoImport from 'unplugin-auto-import/vite'

  plugins: [
    Vue(),
+    AutoImport({
+      imports: [
+        // presets
+        'vue',
+        'vue-router',
+        // custom
+        {
+          '#app': [
+            'defineNuxtComponent',
+            'defineNuxtPlugin'
+          ]
+        }
+      ],
+      dts: false // NOTE: ./auto-imports.d.tsを出力しない
+    })
  ],

  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
+      '#app': path.resolve(__dirname, 'node_modules/nuxt/dist/app')

  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
+      '#app': path.resolve(__dirname, 'test/nuxt.app.ts')

export const defineNuxtComponent = (component: object) => { return component }
export const defineNuxtPlugin = (component: object) => { return component }

import { RouterLinkStub } from '@vue/test-utils'
+ import { envConfig } from '../config/test'
+ import { commonConfig } from '../config/common'
+ import { ja } from '~/locales/ja'

- export class Helper {
-  envConfig = require('~/config/test.js')
-  commonConfig = require('~/config/common.js')
-  locales = require('~/locales/ja.js')
+ export default {
+   envConfig,
+   commonConfig,
+   locales: ja,

import { mount } from '@vue/test-utils'
import helper from '~/test/helper'
import Page from '~/pages/development/color.vue'

describe('color.vue', () => {
  let mock: any
  beforeEach(() => {
    mock = {
      toast: helper.mockToast
    }
  })

  const mountFunction = () => {
    vi.stubGlobal('useNuxtApp', vi.fn(() => ({ $toast: mock.toast })))

    const wrapper = mount(Page)
    expect(wrapper.vm).toBeTruthy()
    return wrapper
  }

  // テスト内容
  const viewTest = (wrapper: any) => {
    helper.presentTest(wrapper)
    helper.toastMessageTest(mock.toast, { error: 'error', info: 'info', warning: 'warning', success: 'success' })
  }

  // テストケース
  it('表示される', () => {
    const wrapper = mountFunction()
    viewTest(wrapper)
  })
})

- const presentTest = (wrapper, AppLoading = null) => {
const presentTest = (wrapper: any, AppLoading: any = null) => {
  if (AppLoading != null) {
    expect(wrapper.findComponent(AppLoading).exists()).toBe(false)
  }
  expect(wrapper.html()).not.toBe('')
}

- const mockCalledTest = (mock, count, ...args) => {
const mockCalledTest = (mock: any, count: number, ...args: any[]) => {
  expect(mock).toBeCalledTimes(count)
  if (count > 0) {
    expect(mock).nthCalledWith(count, ...args)
  }
}

const mockToast = {
  error: vi.fn(),
  info: vi.fn(),
  warning: vi.fn(),
  success: vi.fn()
}

const toastMessageTest = (toastMock: any, message: any) => {
  mockCalledTest(toastMock.error, message.error == null ? 0 : 1, message.error)
  mockCalledTest(toastMock.info, message.info == null ? 0 : 1, message.info)
  mockCalledTest(toastMock.warning, message.warning == null ? 0 : 1, message.warning)
  mockCalledTest(toastMock.success, message.success == null ? 0 : 1, message.success)
}

export default {
  presentTest,
  mockCalledTest,
  mockToast,
  toastMessageTest
}

import { useNuxtApp } from '#app'

<script>
import IndexSignUp from '~/components/index/SignUp.vue'
import IndexInfomations from '~/components/index/Infomations.vue'

-    const button = wrapper.find('#sign_up_btn')
+    const button: any = wrapper.find('#sign_up_btn')
-    expect(button.vm.disabled).toBe(true) // 無効
+    expect(button.element.disabled).toBe(true) // 無効

describe('sign_in.vue', () => {
-  let routerPushMock
+  let mock: any
-
  beforeEach(() => {
-    routerPushMock = vi.fn()
+    mock = {
+      navigateTo: vi.fn()
+    }
  })

  const mountFunction = (loggedIn: boolean, values: object | null = null) => {
+    vi.stubGlobal('navigateTo', mock.navigateTo)
+
    const wrapper = mount(Page, {
      global: {
        mocks: {
-          $router: {
-            push: routerPushMock
-          }

-    helper.mockCalledTest(routerPushMock, 1, '/')
+    helper.mockCalledTest(mock.navigateTo, 1, '/')

      navigateTo: vi.fn()
      navigateTo: vi.fn(() => {})

-      axiosPostMock = jest.fn(() => Promise.resolve({ data }))
+      mock.useApiRequest = vi.fn(() => [{ ok: true, status: 200 }, data])

-      axiosPostMock = jest.fn(() => Promise.resolve({ data: null }))
+      mock.useApiRequest = vi.fn(() => [{ ok: true, status: 200 }, null])

-      axiosPostMock = jest.fn(() => Promise.reject({ response: null }))
+      mock.useApiRequest = vi.fn(() => [{ ok: false, status: null }, null])

-      axiosPostMock = jest.fn(() => Promise.reject({ response: { status: 500 } }))
+      mock.useApiRequest = vi.fn(() => [{ ok: false, status: 500 }, null])

-      axiosPostMock = jest.fn(() => Promise.reject({ response: { status: 422, data: Object.assign({ errors: { email: ['errorメッセージ'] } }, data) } }))
+      mock.useApiRequest = vi.fn(() => [{ ok: false, status: 422 }, Object.assign({ errors: { email: ['errorメッセージ'] } }, data)])

-      axiosPostMock = jest.fn(() => Promise.reject({ response: { status: 400, data: {} } }))
+      mock.useApiRequest = vi.fn(() => [{ ok: false, status: 400 }, {}])

      if (response?.ok) {
-        if (!this.appCheckResponse(data, { toasted: true })) { return }
-
+        if (this.appCheckResponse(data, { toasted: true })) {
          ＜成功時の処理＞
+        }
-      } else {
-        if (!this.appCheckErrorResponse(response?.status, data, { toasted: true })) { return }
+      } else if (this.appCheckErrorResponse(response?.status, data, { toasted: true })) {

        ＜失敗時の処理＞
      }

      this.processing = false

-  expect(wrapper.html()).toBe('')
+  expect(wrapper.html({ raw: true }).replaceAll('', '')).toBe('')

-  expect(wrapper.html()).not.toBe('')
+  expect(wrapper.html({ raw: true }).replaceAll('', '')).not.toBe('')

-      wrapper.vm.$data.query = { email: 'user1@example.com' }
+      wrapper.find('#input_email').setValue('user1@example.com')

-      wrapper.find('#pagination1').vm.$emit('input', 2)
+      wrapper.vm.$data.page = 2
+      wrapper.find('#pagination1').trigger('click')

+    console.log(wrapper.html())
    expect(dialog.exists()).toBe(true)

-      <v-dialog transition="dialog-top-transition" max-width="600px">
+      <v-dialog transition="dialog-top-transition" max-width="600px" :attach="$config.public.env.test">

-    expect(dialog.isVisible()).toBe(false) // 非表示
+    expect(dialog.isDisabled()).toBe(false) // 非表示

      <v-btn color="primary" to="/users/sign_up" nuxt>
        <v-icon>mdi-account-plus</v-icon>
        <span class="ml-1">無料で始める</span>
      </v-btn>

    const aTags = wrapper.findAll('a')
    for (let index = 0; index < aTags.length; index++) {
      console.log(aTags[index].element)
      console.log(aTags[index].attributes())
    }

+      <NuxtLink to="/users/sign_up">
-        <v-btn color="primary" to="/users/sign_up" nuxt>
+        <v-btn color="primary">
          <v-icon>mdi-account-plus</v-icon>
          <span class="ml-1">無料で始める</span>
        </v-btn>
+      </NuxtLink>

-        <v-btn to="/users/sign_in" text rounded nuxt>
+        <component :is="$config.public.env.test ? 'NuxtLink' : 'v-btn'" to="/users/sign_in" rounded>
          <v-icon>mdi-login</v-icon>
          <div class="hidden-sm-and-down">ログイン</div>
-        </v-btn>
+        </component>

-            <v-list-item to="/users/update" nuxt rounded="xl">
+            <component :is="$config.public.env.test ? 'NuxtLink' : 'v-list-item'" to="/users/update" rounded="xl">
              <v-list-item-title>
                <v-icon>mdi-account-edit</v-icon>
                ユーザー情報
              </v-list-item-title>
-            </v-list-item>
+            </component>

if (process.env.NODE_ENV === 'production') {
+  /* c8 ignore next */
  showError({ statusCode: 404 })
} else {

-  /* istanbul ignore next */
+  /* c8 ignore start */
  head () {
    const { t: $t } = useI18n()
    const $config = useRuntimeConfig()
    return {
      titleTemplate: `%s - ${$t('app_name')}${$config.public.envName}`
    }
  },
+  /* c8 ignore stop */

test/pages/spaces/index.test.ts
        const beforeLocation = window.location
        const mockReload = vi.fn()
        Object.defineProperty(window, 'location', { value: { reload: mockReload } })

        Object.defineProperty(window, 'location', { value: beforeLocation })

test/pages/downloads.test.ts
      const beforeCreateObjectURL = URL.createObjectURL
      URL.createObjectURL = vi.fn(() => helper.commonConfig.downloads.fileUrl)

      URL.createObjectURL = beforeCreateObjectURL

test/components/invitations/Lists.test.ts
        const mockWriteText = vi.fn(() => Promise.resolve())
        Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText: mockWriteText } })

test/components/app/BackToTop.test.ts
    Object.defineProperty(window, 'scrollY', { value: 200 })

    const mockScrollTo = vi.fn()
    Object.defineProperty(window, 'scrollTo', { value: mockScrollTo })

test/composables/apiRequest.test.ts
    const reqToken = Object.freeze({ 'token-type': 'Bearer', uid: 'uid1', client: 'client1', 'access-token': 'token1' })
    mock.setItem: vi.fn(),
    vi.stubGlobal('localStorage', { getItem: vi.fn((key: string) => reqToken[key]), setItem: mock.setItem })

    const result = Object.freeze({ ok: true, status: 200 })
    const resToken = Object.freeze({ ...reqToken, 'access-token': 'token2', expiry: '123' })
    const resData = JSON.stringify({ key1: 'value1' })
    mock.fetch = vi.fn(() => ({ ...result, headers: { get: vi.fn((key: string) => resToken[key]) }, json: vi.fn(() => resData) }))
    vi.stubGlobal('fetch', mock.fetch)

test/composables/authRedirect.test.ts
    vi.stubGlobal('useState', vi.fn(() => ref(null)))

test/composables/authSignOut.test.ts
    const authData = ref({ name: 'user1の氏名' })
    vi.stubGlobal('useAuthState', vi.fn(() => ({ data: authData })))

test/pages/infomations/[id].test.ts
    mock.showError: vi.fn()
    vi.stubGlobal('showError', mock.showError)