精华内容
下载资源
问答
  • <p>How to test <em>department</em> component? Currently my jest test fails saying "erb is not defined". Is there any way to mock the call to <em>erb</em> function?</p><p>该提问来源于开源项目&#...
  • vue_pc_test
  • vue项目搭建--vue create test 后的报错vue create test vue create test ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version qyh@DESKTOP-7VNG6H1 MINGW64 /f/new $ vue create ...

    vue项目搭建--vue create test 后的报错

    vue create test

    在这里插入图片描述

    输入’vue create test’后报错:

    ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version
    

    解决方法

    在我的电脑中,找到安装脚手架的文件夹,我的是:

    C:\Users\qyh.vuerc 文件

    打开.vuerc 文件,将
    {
    “useTaobaoRegistry”: false,
    “packageManager”: “yarn”
    } 中的

    “useTaobaoRegistry”: 改为true 就可以了

    展开全文
  • 开玩笑的匹配器测试实用程序 (jest-matcher-vue-test-utils) Cute matchers for Jest to test Vue components with Vue Test Utils. 对于可爱的匹配玩笑测试与Vue的成分VUE考试utils的 。 You can write tests for...

    开玩笑的匹配器测试实用程序 (jest-matcher-vue-test-utils)

    Cute matchers for Jest to test Vue components with Vue Test Utils.

    对于可爱的匹配玩笑测试与Vue的成分VUE考试utils的

    You can write tests for Vue component/store intuitively ⚡️

    您可以直观地为Vue组件/存储编写测试️

    it("Emits 'select' event by clicking PrimaryButton", () => {
      const wrapper = shallowMount(Component);
      
      expect(wrapper.emitted().select).toBeUndefined();
      wrapper.find(PrimaryButton).vm.$emit("click");
      expect(wrapper.emitted().select[0]).toBeTruthy();
    });

    becomes

    变成

    it("Emits 'select' event by clicking PrimaryButton", () => {
      const wrapper = shallowMount(Component);
      
      expect(() => {
        wrapper.find(PrimaryButton).vm.$emit("click");
      }).toEmit(wrapper, "select");
    });

    And all matchers have type definition and doc 💇‍♂️

    而且所有匹配器都有类型定义和文档💇‍♂️

    jest-matcher-vue-test-utils

    安装 (Installation)

    Get from npm:

    从npm获取:

    $ npm install -D jest-matcher-vue-test-utils

    Then, register matchers on your jest process:

    然后,在玩笑过程中注册匹配器:

    import vueTestUtilMatchers from "jest-matcher-vue-test-utils";
    expect.extend({ ...vueTestUtilMatchers });

    提供的匹配器 (Provided Matchers)

    包装上的存在 (Existence on Wrapper)

    toShow (toShow)

    Assert the function shows a content on Wrapper of vue-test-utils 断言该函数在vue-test-utils的包装上显示内容
    // error-message.vue
    <template>
      <div>
        <p v-if="isError" class="error">message</p>
      </div>
    </template>
    
    ...
    
    data: function () {
      return {
        isError: false
      }
    },
    methods: {
      showError () {
        this.isError = true;
      }
    }
    import Component from "./error-message.vue";
    
    it("show error by showError", async () => {
      return expect(async () => {
        wrapper.vm.showError();
        await wrapper.vm.$nextTick();
      }).toShow(wrapper, "p.error"); // Passes
    });

    toHide (toHide)

    Assert the function hides a content on Wrapper of vue-test-utils 断言该函数在vue-test-utils的包装器上隐藏内容
    // error-message.vue
    <template>
      <div>
        <p v-if="isError" class="error">message</p>
      </div>
    </template>
    
    ...
    
    data: function () {
      return {
        isError: true
      }
    },
    methods: {
      hideError () {
        this.isError = false;
      }
    }
    import Component from "./error-message.vue";
    
    it("show error by showError", async () => {
      return expect(async () => {
        wrapper.vm.hideError();
        await wrapper.vm.$nextTick();
      }).toHide(wrapper, "p.error"); // Passes
    });

    包装事件 (Events on Wrapper)

    toEmit (toEmit)

    Assert the action emits the event (with the payload optionally) on Wrapper of vue-test-utils 断言该动作在vue-test-utils的包装器上发出事件(可选地带有有效负载)
    // event.vue
    <template>
      <div @click="emitEvent('clicked')">
        Click Me
      </div>
    </template>
    
    <script>
    module.exports = {
      methods: {
        emitEvent (e) {
          this.$emit("special", e);
        }
      }
    }
    </script>
    import Component from "./event.vue";
    
    it("emits special event by click", () => {
      const wrapper = shallowMount(Component);
      expect(() => wrapper.trigger("click")).toEmit(wrapper, "special"); // Passes
      expect(() => wrapper.trigger("click")).toEmit(wrapper, "special", "clicked"); // Passes
    });

    Async function is supported as well.

    也支持异步功能。

    it("emits special event by click", async () => {
      const wrapper = shallowMount(Component);
      return expect(async () => triggersEventAsynchronously()).toEmit(wrapper, "special", "clicked"); // Passes
    });

    toHaveEmitted (toHaveEmitted)

    Assert the event is emitted (with the payload optionally) on Wrapper of vue-test-utils 断言事件在vue-test-utils的包装器上发出(可选地带有有效负载)
    // event.vue
    <template>
      <div @click="emitEvent('clicked')">
        Click Me
      </div>
    </template>
    
    <script>
    module.exports = {
      methods: {
        emitEvent (e) {
          this.$emit("special", e);
        }
      }
    }
    </script>
    import Component from "./event.vue";
    
    it("emits special event by click", () => {
      const wrapper = shallowMount(Component);
      wrapper.trigger("click");
      expect(wrapper).toHaveEmitted("special"); // Passes
      expect(wrapper).toHaveEmitted("special", "clicked"); // Passes
    });

    Vuex动作/变异 (Vuex actions/mutations)

    toDispatch (toDispatch)

    Assert the function dispatches Vuex action on the component 断言函数在组件上分派Vuex操作
    // click-store.vue
    <template>
      <div @click="dispatchStore('click')">
        Click Me
      </div>
    </template>
    
    <script>
    module.exports = {
      methods: {
        dispatchStore (e) {
          this.$store.dispatch('awesomeAction', e);
        }
      }
    }
    </script>
    import Component from "./click-store.vue";
    
    it("Dispatches the action on store by click", () => {
      const wrapper = shallowMount(Component);
      expect(() => {
        wrapper.trigger("click");
      }).toDispatch(wrapper, "awesomeAction"); // Passes
    
      expect(() => {
        wrapper.trigger("click");
      }).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
    });

    Async function is supported as well.

    也支持异步功能。

    it("dispatches the action on store by click", async () => {
      return expect(async () => {
        dispatchEventAsynchronosly();
      }).toDispatch(wrapper, "awesomeAction", 'click'); // Passes
    });

    toCommit (TBD) (toCommit (TBD))

    Assert the store mutation is committed 断言商店突变已落实
    // click-store.vue
    <template>
      <div @click="commitStore('click')">
        Click Me
      </div>
    </template>
    
    <script>
    module.exports = {
      methods: {
        commitStore (e) {
          this.$store.commit('importantMutation', e);
        }
      }
    }
    </script>
    import Component from "./click-store.vue";
    
    it("Commits the mutation on store by click", () => {
      const wrapper = shallowMount(Component);
      expect(() => {
        wrapper.trigger("click");
      }).toCommit(wrapper, "importantMutation"); // Passes
    
      expect(() => {
        wrapper.trigger("click");
      }).toCommit(wrapper, "importantMutation", 'click'); // Passes
    });

    toHaveDispatched (toHaveDispatched)

    Assert a component has dispatched Vuex action 断言组件已调度Vuex操作
    // click-store.vue
    <template>
      <div @click="dispatchStore('click')">
        Click Me
      </div>
    </template>
    
    <script>
    module.exports = {
      methods: {
        dispatchStore (e) {
          this.$store.dispatch('awesomeAction', e);
        }
      }
    }
    </script>
    import Component from "./click-store.vue";
    import { vuexPlugin } from "jest-matcher-vue-test-utils";
    
    it("Dispatches the action on store by click", () => {
      const store = new Vuex.Store({
        actions: dispatchStore() {},
        plugins: [vuexPlugin()] // Requires adding plugin to use `toHaveDispatched` matcher
      });
    
      const wrapper = shallowMount(Component, { store })
      wrapper.trigger("click");
      expect(wrapper).toHaveDispatched("awesomeAction"); // Passes
      expect(wrapper).toHaveDispatched("awesomeAction", "click"); // Passes
    });

    道具验证 (Prop Validations)

    toBeValidProps (toBeValidProps)

    Assert that a prop set is valid for a component 断言道具集对组件有效
    // name-require-and-fullname-is-validated-component.vue
    props: {
      name: {
        type: String,
        required: true
      }
      fullname: {
        validator: function (val) {
          return !!val && val.match(/.+\s.+/);
        }
      }
    }
    import Component from "./name-require-and-fullname-is-validated-component.vue";
    
    it("component validates props", () => {
      expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo Hamasaki" }); // Passes
      expect(Component).toBeValidProps({ fullName: "Kengo Hamasaki" }); // Fails
      expect(Component).toBeValidProps({ name: "required name", fullName: "Kengo" }); // Fails
    });

    toBeValidProp (toBeValidProp)

    Assert that a single prop is valid for a component 断言单个道具对组件有效
    // name-require-component.vue
    props: {
      name: {
        type: String,
        required: true
      }
    }
    import Component from "./name-require-component.vue";
    
    it("component validates props", () => {
      expect(Component).toBeValidProp("name", "Required Name"); // Passes
      expect(Component).toBeValidProp("name", null); // Fails as required
      expect(Component).toBeValidProp("name", 123}); // Fails as typecheck
    });

    toRequireProp (toRequireProp)

    Assert that a component requires a prop 断言组件需要道具
    // name-require-component.vue
    props: {
      name: {
        type: String,
        required: true
      }
    }
    import Component from "./name-require-component.vue";
    
    it("component requires name prop", () => {
      expect(Component).toRequireProp("name"); // Passes
      expect(Component).toRequireProp("birthday"); // Fails
    });

    toHaveDefaultProp (toHaveDefaultProp)

    Assert that a component gives default to a prop 断言组件默认为道具
    // default-address-component.vue
    props: {
      address: {
        type: String,
        default: "Kitakyushu, Japan"
      }
    }
    import Component from "./default-address-component.vue";
    
    it("component gives default value for address prop", () => {
      expect(Component).toHaveDefaultProp("address", "Kitakyushu, Japan"); // Passes
      expect(Component).toHaveDefaultProp("address", "San Francisco, US"); // Fails
    });

    toBeValidPropWithTypeCheck (toBeValidPropWithTypeCheck)

    Assert that a component validates a prop with type 断言组件验证类型的道具
    // takes-zipcode-component.vue
    props: {
      zipcode: {
        type: String
      }
    }
    import Component from "./takes-zipcode-component.vue";
    
    it("component validates zipcode prop", () => {
      expect(Component).toBeValidPropWithTypeCheck("zipcode", "94103"); // Passes
      expect(Component).toBeValidPropWithTypeCheck("zipcode", 94103); // Fails
    });

    toBeValidPropWithCustomValidator (toBeValidPropWithCustomValidator)

    Assert that a component validates a prop with custom validator 断言组件使用自定义验证器验证道具
    // fullname-is-validated-component.vue
    props: {
      fullname: {
        validator: function (val) {
          return !!val && val.match(/.+\s.+/);
        }
      }
    }
    import Component from "./fullname-is-validated-component.vue";
    
    it("component validates fullname prop", () => {
      expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo Hamasaki"); // Passes
      expect(Component).toBeValidPropWithCustomValidator("fullname", "Kengo"); // Fails
    });

    设定档 (Config)

    We can configure the matchers. Currently accepting mountOptions property to give options for shallowMount which is running in inside of matchers.

    我们可以配置匹配器。 当前接受mountOptions属性来为在匹配器内部运行的shallowMount提供选项。

    import vueTestUtilMatchers, { config } from "jest-matcher-vue-test-utils";
    import { createLocalVue } from "@vue/test-utils";
    
    config({
      mountOptions: { localVue: createLocalVue() }
    });

    翻译自: https://vuejsexamples.com/cute-jest-matchers-to-test-vue-components-with-vue-test-utils/

    展开全文
  • `// 1.全局安装插件 npm install -g @vue/cli-service-global // 2.运行test.vue文件 vue serve Hello.vue ` 启动服务即可访问

    // 1.全局安装插件
    npm install -g @vue/cli-service-global

    // 2.运行test.vue文件
    vue serve test.vue

    启动服务即可访问

    展开全文
  • <p><strong>I hava some trouble when I used vue-test-utils with jest and vue.1.0 to test vue single component. <strong>Error:TypeError: Cannot read property 'child' of undefined.</strong></p> ...
  • 1、在终端输入 vue create test_vue_app,执行后需要选择一个预设功能,首次创建时候选择Manually select features(手动选择功能) 说明:vue_test是之前我创建项目时候保存的一个预设 2、通过键盘上的上下键...

    通过终端命令创建vue项目(第一种创建vue项目的方式)

    1、在终端输入 vue create test_vue_app,执行后需要选择一个预设功能,首次创建时候选择Manually select features(手动选择功能)

    说明:vue_test是之前我创建项目时候保存的一个预设

    2、通过键盘上的上下键选择manually select features后,按回车键后会出现下图

    然后根据需要上下键切换,按空格键选择

    选择完成后按enter键,选择vue版本,如3.X

    接着回车,选择y

    接下来按照如下选择一直enter

    最后会问你,是否要把这次的设置保存为预设,可以根据自身情况选择

    然后开始创建

    创建完成后项目目录如下

    在终端执行

     cd test_vue_app  //切换到项目目录
     npm run serve     //启动项目

    按ctrl键在浏览器中打开,效果如下

     

    展开全文
  • vue-test-utils-next Vue测试实用程序的下一个迭代。它以Vue 3为目标。 安装及使用 毛线: yarn add @vue/test-utils@next --dev npm: npm install @vue/test-utils@next --save-dev 开始使用。 来自Vue 2 + Vue...
  • Vue_test2-源码

    2021-03-12 15:27:18
    Vue_test2
  • project02 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • 职位 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 自定义配置 请参阅。
  • <div><p>add initial simple unit test code by using - vue-test-utils - jest </p><p>该提问来源于开源项目:microsoft/TypeScript-Vue-Starter</p></div>
  • Vue单元测试:Vue Test Utils + Jest

    千次阅读 2018-11-12 14:40:56
    1、 安装Jest和Vue Test Utils。 $ npm install --save-dev jest @vue/test-utils 2、安装vue-jest。.vue文件一般为单文件组件(Single-File Componengts),即html,js,css在一个文件中,vue-jest告诉Jest如何...
  • vue-test-源码

    2021-03-15 00:04:30
    验证测试 带有Vue.js的前端应用程序允许用户使用Vue Router,Vuetify,Vuex和 API来查看来自各个网站的新闻。 安装 npm install 使用 npm run serve 运行e2e测试 npm run test:e2e
  • at ErrorWrapper.hasProp (node_modules_vue-test-utils.0.0-beta.11-test-utils\dist\vue-test-utils.js:602:3) at Context.it (.tmp\mocha-webpack\1519815705782\webpack:\test\MessageToggle.spec.js:12:1) ...
  • vue单元测试vue test utils使用初探

    千次阅读 2019-04-04 02:40:43
    至此我才第一次接触到测试代码,我们项目使用的测试工具是jest,与vue官方出的单元测试工具库vue-test-utils配合使用。第一次接触测试代码,开始的时候还是一脸懵逼,有种学习一门新语言的赶...
  • by Edd Yerburgh 埃德·... 使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit tests with Tape and Vue Test Utils) Tape is the fastest framework for unit testing Vue components. ...
  • uap-vue-test-源码

    2021-04-01 10:56:45
    uap-vue-test
  • vue-js-test-源码

    2021-02-27 01:28:57
    vue-js-test
  • vue-test.rar

    2020-04-28 21:42:52
    聊天室前端代码,基于Vue使用Element-UI框架写的前端聊天室,大家可以下载即可用,如果你已经安装了vue-cli脚手架你直接可以打开使用
  • vue-test.zip

    2019-10-09 09:17:45
    vue小demo,vue小demo,包含路由等,使用ant,包含一些小组件,例如表单,表格,图片上传等等
  • 验证测试 Vue.js的组件测试实用程序(与Vue ... 注意:vue-test需要Vue的完整版本(包括编译器)。 确保您的构建配置用于测试的别名vue正常。 例如(webpack 2): { resolve : { alias : { 'vue$' : 'vue/dist/vu
  • vue-demo-test

    2018-04-09 11:44:10
    自己写的vue官网实例代码,可以用做学习vue的简单实例参考,当做入门学习的资料。大家酌情下载,希望对大家有学习vue有帮助,后续会继续更新学习记录,谢谢
  • test.vue' <p><img alt="2020-06-24 09 07 20" src="https://img-blog.csdnimg.cn/img_convert/2f7563d7ead2b5c7c03bc16ed91d973b.gif" /></p> <h2>Reproducible Case <p>Install Vetur and set it as the ...
  • 学习Vue Test Utils

    千次阅读 2019-05-29 22:30:32
    刚开始找了一本书Testing Vue.js Application,看书觉得好简单,谁知道,仅仅按照书中的例子运行就遇到了问题。我搞不清楚是不是因为高端大气上档次的天朝网络导致我安装依赖包出现了问题进而导致运行失败,还是别的...
  • vue3_test-源码

    2021-02-10 06:59:16
    11_vue3_test 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • Vue Test Utils是Vue.js的官方测试库。 配套 该存储库提供以下两个软件包: 您可以通过以下命令安装这些软件包。 npm install --save-dev @vue/test-utils npm install --save-dev @vue/server-test-utils 对等...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,606
精华内容 3,842
关键字:

testvue

vue 订阅