Блог

Я создал простое приложение Vue 2, используя Vue Composition API с помощью Typescript, и я разделяю свою логику на функции композиции в отдельных файлах typescript. Все работает просто отлично, когда я запускаю приложение, но когда я пытаюсь запустить модульные тесты Jest для компонента, я получаю следующую ошибку:

Ошибка типа: (0, _Dummy.default) не является функцией

Я воспроизвел проблему в простой фиктивной настройке со следующим компонентом Dummy.vue:

Dummy.vue

 <template>
  <div>
    <p>Test</p>
    <p>{{ isLoading }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
import useDummy from "./Dummy";

export default defineComponent({
  name: "Dummy",
  setup(props, { root }) {
    const { isLoading, IsLoading2 } = useDummy();
    //return { isLoading, IsLoading2 }; //It doesn't make a difference if I return or not
  },
});
</script>
 

Это импорт и использование функции композиции Dummy.ts с useDummy() вызовом выше. Dummy.ts можно увидеть ниже:

Dummy.ts

 export default function() {
  const isLoading: boolean = false;
  const isLoading2: boolean = false;

  return { isLoading, isLoading2 };
}
 

Модульный тест Jest, который завершается с ошибкой, заключается в следующем:

Test.spec.ts

 import "jest";
import Vuex from "vuex";
import CompositionApi from "@vue/composition-api";
import { createLocalVue, shallowMount } from "@vue/test-utils";
import Dummy from "@/components/Dummy/Dummy.vue";

const localVue = createLocalVue();
localVue.use(CompositionApi);
localVue.use(Vuex);

describe("Dummy", () => {
  it("should not fail mounting", () => {
    var wrapper = shallowMount(Dummy, {
      localVue,
    });
  });
});
 

Я выделил проблему, возникающую при вызове функции композиции useDummy() . Если я прокомментирую эту строку, тест завершится успешно. Аналогично, если я беру код из функции composition и вставляю его непосредственно в компонент Dummy.vue, он также работает.
Интересно, что если я удалю его использование localVue , оно также пройдет, но я предполагаю, что это потому, что тогда он не знает, как использовать Composition API, и поэтому не вызывает метод setup() . Так что на самом деле это не вариант.