文章/答案/技术大牛

发布

社区首页 >问答首页 >使用vue-cli测试vue组件，不能测试父方法吗？

问使用vue-cli测试vue组件，不能测试父方法吗？
EN

Stack Overflow用户

提问于 2018-10-16 08:56:11

回答 1查看 454关注 0票数 0

我遇到了一个我搞不懂的问题，环顾四周似乎没人问同样的问题.

下面是我的工作代码：

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

window.Vue = Vue

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  methods: {
    greetings: function () {
      return 'good morning'
    }
  },
  render: h => h(App)
})

router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Configurations from '@/components/Configurations'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/configs',
      name: 'Configurations',
      component: Configurations
    }
  ]
})

App.vue:

<template>
    <router-view></router-view>
</template>
<script>
export default {
  name: "App"
};
</script>

Configurations.vue:

<template>
<span>{{greetings}}</span>
</template>

<script>
export default {
  name: "configurations",
  data() {
    return {
      greetings: ""
    };
  },
  created: function() {
    this.greetings = this.$root.greetings();
  }
};
</script>

当我运行这个程序时，它会显示一个页面，上面写着“早上好”。没别的了。正如您所看到的，问候消息是在main.js文件上定义的，因为在这个场景中，我希望在所有组件上显示一条消息，即版权注释。因此，我将关于共同祖先的消息设置为我的所有组件。

根据我的理解，要从“父”组件调用方法，可以使用this.$root.yourMethod()来调用它。

现在，问题是，如果我想为配置组件运行一个单元测试，我就会得到一个错误，它使我相信，我设置东西的方式，我不能测试this.$root.greetings()，因为有东西告诉我，测试环境不知道组件之间的父子关系。

所以，当我跑的时候

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

设置了以下测试文件：

Configurations.spec.js

import Configurations from '@/components/Configurations'
import Vue from 'vue'

describe('Configurations.vue', () => {
  it('should display a greetings message', () => {
    const Constructor = Vue.extend(Configurations)
    const ConfigurationsComponent = new Constructor().$mount()
    expect(ConfigurationsComponent.greetings).to.not.be.undefined;
  })
})

我得到：

> 16 10 2018 09:28:35.184:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:28:35.191:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:28:35.204:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:28:40.977:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket WnDl-mQqmNZQOfyzAAAA with id 10303480 ERROR LOG: '[Vue warn]:
> Error in created hook: "TypeError:  is not a constructor (evaluating
> 'this.$root.greetings()')"

(后面是堆栈溢出的更多行，因为它们包含太多的链接，所以不允许我发布)

现在，如果我要改变

this.greetings = this.$root.greetings()

至：

this.greetings = "good morning";

在Configurations.vue文件中，然后再次运行测试命令，我将得到：

> 16 10 2018 09:48:43.174:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:48:43.180:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:48:43.555:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:48:49.228:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket o8BQ24wv1QX26SAZAAAA with id 53463701
> 
>   Configurations.vue
>     √ should display a greetings message
>
> PhantomJS 2.1.1 (Windows 8.0.0): Executed 1 of 1 SUCCESS (0.024 secs / 0.017 secs)
>
> TOTAL: 1 SUCCESS

(后面跟着一些不相关的其他信息)

那么，如何对包含对这个.$root方法的调用的组件运行单元测试呢？

任何帮助都是非常感谢的。

卢卡斯

unit-testing

vue.js

vuejs2

vue-cli

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-16 09:11:11

您应该(几乎)永远不要从父组件中调用某些东西。

您有两种可能性: 1.使用vuex商店并将数据保存在那里。然后，每个需要的组件都可以通过存储获取器访问它。2.向您的子组件提供所需的数据作为支持。

因为道具的事情变得很快凌乱一个建议使用商店。

如果这样做，您的测试将变得更加清晰和容易阅读。

用一个模拟的商店进行简单的测试(仅仅是为了展示事情会如何发展)：

describe('MyComponent', () => {
  let wrapper

  beforeEach(() => {
    const localVue = createLocalVue()
    wrapper = mount(MyComponent, {
      localVue,
      mocks: {
        $store: {
          getters: {
            'copyright': 'MyCopyright text'
          }
        }
      }
    })
  })

  it('should display copyright text', () => {
    expect(wrapper.text('MyCopyright text')).toBe(true) 
  })
})

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52831622

复制

相似问题

问使用vue-cli测试vue组件，不能测试父方法吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用vue-cli测试vue组件，不能测试父方法吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用vue-cli测试vue组件，不能测试父方法吗？
EN