Question

我有这个vuetify按钮


 <v-btn
  @click="resetQuiz"
 >
    Click to Start
 </v-btn>

我正在测试按钮点击时的点击事件

  it(`should trigger an event when the 'click to start' button is clicked`, () => {
    const event = jest.fn()
    const button = wrapper.findComponent({ name: 'v-btn' })
    expect(button.exists()).toBe(true);

    expect(button.text()).toBe('Click to Start')
    console.log(button);
    
    button.vm.$emit('click')
    expect(event).toHaveBeenCalledTimes(0)

    button.trigger('click')
    expect(event).toHaveBeenCalledTimes(1)
  })

当我登录按钮时，显然没有事件发出。

VueWrapper {
      isFunctionalComponent: undefined,
      _emitted: [Object: null prototype] {},
      _emittedByOrder: [],
      selector: { name: 'v-btn' }
    }

测试expect(event).toHaveBeenCalledTimes(1)的这一行失败。我已经尝试过<v-btn @click="resetQuiz()">， <v-btn @click.native="resetQuiz">，以及 @click.native="resetQuiz()">

这是我的方法

methods: {
    resetQuiz () {
      window.location.reload()
    }
  }

Answer 1

您可以提供有效的演示吗？您提供的示例似乎运行良好。我根本没有it()函数。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>App
        <v-btn @click="resetQuiz">
          Click to Start
        </v-btn>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    methods: {
      resetQuiz() {
        console.log('RESET');
        //window.location.reload()
      }
    }
  })
</script>

Answer 2

因此，我在研究了多种资源后找到了修复程序。

首先，我使用shallowMount而不是mount进行测试。与mount不同，shallowMount允许您检索包装程序自动记录的事件，const wrapper = mount(SomeComponent, { localVue, vuetify, })仅呈现组件的某些部分。

@/router

其次，我遇到了路由器链接的玩笑问题。我从本地路由器const wrapper = mount(Welcome, { localVue, vuetify, router: router })导入了路由器，然后将路由器添加到了包装器

window.location.reload()

由于我正在使用methods: { resetQuiz () { window.location.assign('/quiz') } }，开玩笑的dom在控制台上引发了导航错误。这是我现在的方法

delete window.location

最后，我不得不将jest函数分配给window.location。这就是完整测试的样子。 describe('SomeComponent.vue', () => { const localVue = createLocalVue() let vuetify const { location } = window beforeAll(() => { // @ts-ignore delete window.location window.location = { ...window.location, assign: jest.fn() } }) afterAll(() => { window.location = location }) beforeEach(() => { vuetify = new Vuetify({}) }) const wrapper = mount(SomeComponent, { localVue, vuetify, router: router }) it('should trigger when the start button is clicked', () => { const event = window.location.assign = jest.fn() const button = wrapper.findComponent({ name: 'v-btn' }) expect(button.exists()).toBe(true) expect(button.text()).toBe('Click to Start') button.trigger('click') expect(event).toHaveBeenCalled() expect(event).toBeCalledWith('/quiz') }) })删除任何现有位置

window.location

您可能会遇到打字稿测试node的问题，需要将tsConfig添加到compilerOptions compilerOptions: { ... "types": [ ... "node" ], }

$ cd %JAVA_HOME%
$ bin\jlink --module-path jmods --add-modules jdk.jcmd --output c:\custom-jdk
$ c:\custom-jdk\bin
$ jcmd

如何使vuetify v-btn元素成为单击事件

2 个答案: