javascript - 如何使用 Jest 测试组件是否正确计算数组长度

Question

我有一个组件，我正在给一个数组，其中包含对象作为 Prop ，如下所示:

describe('component', () => {
  it('should return the correct number of items passed in the array', () => {
    const comp = shallowMount(component, {propsData: {
      buttons: [
        {name:'button1'},
        {name:'button2'}
      ]
    }});
    expect(component.length).toHaveLength(buttons).length
  });
});

我如何测试提供的数组是否具有正确的长度，例如如果数组中有两个对象，组件应该返回两个，如果有一个，一个，如果没有那么它应该返回 0，我怎么能做到这一点？我试过了

expect(component.length).toHaveLength(buttons).length

但这不起作用

Answer 1

我想您想检查是否呈现了正确数量的某种类型的子项(在 Vue 中)。

// import component that you want to count, e.g. Button

const buttons = [
  { name: 'button1' },
  { name: 'button2' }
]

const comp = shallowMount(component, { propsData: { buttons } })

expect(comp.findAll(Button).length).toBe(buttons.length)

https://lmiller1990.github.io/vue-testing-handbook/finding-elements-and-components.html#findall