Nuxt.js で useContext を使った時のモック方法

概要

Nuxt.js で useContext を使った時のテストで躓いたので忘れないようにメモ

今回は、@nuxtjs/dayjs の useContext から取得することを考える。
テスト対象は isToday 関数である。

//useDayjs.ts
export const useDayjs = () => {
  const { $dayjs } = useContext()

  const isToday = (date: ConfigType): boolean => {
      // use $dayjs
  }

  return {
    isToday
  }
}

// index.vue
export default defineComponent({
  setup() {
    const { isToday } = useDayjs()

    return {
      isToday
    }
  }
})

useContext から取得するオブジェクトのモック方法

Composition API を使わない書き方だと、 mocks で $dayjs をモックできる。

const wrapper = shallowMount(Component, {
  mocks: {
    $dayjs: dayjs
  }
})

ただ、Composition API だと同じようにモックすることができない。次のように書くことで、 useContext のオブジェクトをモックできた。

const wrapper = shallowMount(Component, {
  mocks: {
    $nuxt: {
      context: {
        $dayjs: dayjs
      },
    },
  },
})

Date.now を固定するときは、 Jest のドキュメント にも書かれているように、jest.fn を使えば簡単にできる。
ただ、数値を指定するので直感的に日付の理解が難しい。 mockDate を使えば、分かりやすく簡単に　Date オブジェクトをモックできる。