首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用nuxt、vuex和jest gettig测试不支持错误的vue应用程序

使用nuxt、vuex和jest gettig测试不支持错误的vue应用程序
EN

Stack Overflow用户
提问于 2020-05-08 14:29:31
回答 1查看 750关注 0票数 2

我想要单元测试我的组件,它在单击按钮时会改变存储模块中的对象。

我遵循了关于如何对nuxt和vuex进行单元测试的布兰登·阿斯科夫( brandon aaskov )撰写,但是我无法引用nuxt存储对象。我总是得到这样的输出:

代码语言:javascript
复制
    Error: Not supported

        at Object.<anonymous> (...\tests\unit\plannerObjectSelector.spec.js:67:5) 

    > (the line NuxtStore = await import(storePath);)

        at Object.asyncJestLifecycle (...\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:53:37)
        at ...\node_modules\jest-jasmine2\build\queueRunner.js:43:12
        at new Promise (<anonymous>)
        at mapper (...\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
        at ...\node_modules\jest-jasmine2\build\queueRunner.js:73:41

这是我要测试的组件:

代码语言:javascript
复制
     <template>
   <v-container>
     <v-row v-for="object in plannerObjects" :key="object.id">
       <v-btn
         v-if="object.id == activeObjectId"
         color="primary"
         class="button"
         block
         large
         tile
         @click="objectSelected(object)"
       >
         {{ object.name }}
       </v-btn>
       <v-btn
         v-else
         color="primary"
         block
         large
         text
         @click="objectSelected(object)"
         :ref="'unSelectedBtn-' + object.id"
       >
         {{ object.name }}
       </v-btn>

     </v-row>
   </v-container>
 </template>

 <script>
 export default {
   name: "spaceSelector",
   props: {
     plannerObjects: {
       type: Array,
       required: true
     }
   },
   data: () => ({
     activeObjectId: -1
   }),
   methods: {
     objectSelected(object) {
       console.log("Sroe object", object);
       this.$store.commit("planner/setActivePlannerObject", object);
       this.activeObjectId = object.id;
       console.log(this.$store.getters["planner/activePlannerObject"]);
     }
   }
 };
 </script>

 <style scoped>
 .button {
   width: 190px;
 }
 </style>

这是我的jest.config.js文件:

代码语言:javascript
复制
代码语言:javascript
复制
module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
  setupFiles: ["<rootDir>/tests/unit/index.js"],
  globalSetup: "<rootDir>/jest.setup.js"
};```

jest.setup.js:

代码语言:javascript
复制
    import { Nuxt, Builder } from "nuxt";
    import nuxtConfig from "./nuxt.config";

    // these boolean switches turn off the build for all but the store
    const resetConfig = {
      loading: false,
      loadingIndicator: false,
      fetch: {
        client: false,
        server: false
      },
      features: {
        store: true,
        layouts: false,
        meta: false,
        middleware: false,
        transitions: false,
        deprecations: false,
        validate: false,
        asyncData: false,
        fetch: false,
        clientOnline: false,
        clientPrefetch: false,
        clientUseUrl: false,
        componentAliases: false,
        componentClientOnly: false
      },
      build: {
        indicator: false,
        terser: false
      }
    };

    // we take our nuxt config, lay the resets on top of it,
    // and lastly we apply the non-boolean overrides
    const config = Object.assign({}, nuxtConfig, resetConfig, {
      mode: "spa",
      srcDir: nuxtConfig.srcDir,
      ignore: ["**/components/**/*", "**/layouts/**/*", "**/pages/**/*"]
    });

    const buildNuxt = async () => {
      const nuxt = new Nuxt(config);
      await new Builder(nuxt).build();
      return nuxt;
    };

    module.exports = async () => {
      const nuxt = await buildNuxt();

      // we surface this path as an env var now
      // so we can import the store dynamically later on
      process.env.buildDir = nuxt.options.buildDir;
    };

单元/index.js

代码语言:javascript
复制
    import Vue from "vue";
    import Vuetify from "vuetify";
    Vue.config.productionTip = false;
    Vue.use(Vuetify);

最后我的考试课:

代码语言:javascript
复制
    import { shallowMount } from "@vue/test-utils";
    import plannerObjectSelector from "../../components/core/bars/planner/plannerObjectSelector";
    import { __createMocks as createStoreMocks } from "../../store";
    import _ from "lodash";

    import { createLocalVue } from "@vue/test-utils";

    import Vuex from "vuex";
    import Vuetify from "vuetify";

    var plannerObjects = [
    {
    id:0
    }
    ];
    const factory = () => {
      return shallowMount(plannerObjectSelector, {
        propsData: {
          plannerObjects: plannerObjects
        }
      });
    };

    describe("plannerObjectSelector.vue", () => {
      const localVue = createLocalVue();
      localVue.use(Vuex);
      localVue.use(Vuetify);

      // to use Store
      let NuxtStore;
      let store;

      beforeAll(async () => {
        // note the store will mutate across tests
        const storePath = `${process.env.buildDir}/store/index.js`;
        NuxtStore = await import(storePath);
      });

      beforeEach(async () => {
        store = await NuxtStore.createStore();
      });  

      it("renders", () => {
        const wrapper = factory();
        expect(wrapper.exists()).toBe(true);
      });

      it("buttonClickedStoresObjectInStore", () => {
        const wrapper = factory();
        var btnref = "unSelectedBtn-0";
        const btn = wrapper.find({ ref: btnref });
        btn.trigger("click");
        // look whats in our Store
        let plannerObject = store.getters["planner/activePlannerObject"];
        console.log(plannerObject);
        expect(plannerObject).toBe(plannerObjects[0]);
      });

      test("mounts properly", () => {
        const wrapper = factory();
        expect(wrapper.isVueInstance()).toBeTruthy();
      });

      test("renders properly", () => {
        const wrapper = factory();
        expect(wrapper.html()).toMatchSnapshot();
      });
    });

这是我的文件夹结构:

我会感谢你的任何建议。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-16 08:03:19

结果很简单,只需直接测试函数,即使我像你一样翻阅文档已经花了几个小时的时间。

代码语言:javascript
复制
// ~/store/getters.ts

import { GetterTree } from 'vuex'
import { RootState } from '~/store/state'

export default {
  [Getters.KEY.IS_SIGN_IN]: (state: RootState): boolean => {
    return Boolean(state.currentUser)
  }
} as GetterTree<RootState, RootState>
代码语言:javascript
复制
// ~/store/__tests__/getters.test.js (do not use .ts)

import state from '~/store/state'
import getters, { Getters } from '~/store/getters'

describe('getters', () => {
  it(Getters.KEY.IS_SIGN_IN, () => {
    // currentUser: undefined
    expect(getters[Getters.KEY.IS_SIGN_IN](state)).toBe(false)

    // SignIn: true
    state.currentUser = { ...$mockData.currentUser }
    expect(getters[Getters.KEY.IS_SIGN_IN](state)).toBe(true)
  })
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61681441

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档