Question

使用Vue CLI，我有一个单元测试，我试图检查是/否看起来像这样：

describe('The thing', () => {
    it('must be available.', () => {
        const available = true
        const wrapper = shallowMount(MyVueComponent, {
            propsData: { available },
        })
        expect(wrapper).to.be.true
    })
})

我运行npm run test:unit

我得到以下信息：

AssertionError：预期{对象（isFunctionalComponent，_emitted，...）}为真

如果我只检查available的值，那一切都很好。但这似乎是我做错了。

我正在编写的其他测试在检查文本值时工作正常：

describe('The thing', () => {
    it('should have a name.', () => {
        const name = 'Hal'
        const wrapper = shallowMount(MyVueComponent, {
            propsData: { name },
        })
        expect(wrapper.text()).to.include(name)
    })
})

我不确定如何检查available是否为布尔值，并且必须为true。任何建议将不胜感激！

编辑

这是我的Vue组件的样子：

export default {
    name: 'MyVueComponent',
    props: {
        name: String
    },
    data: function() {
        return {
            available: true,
        }
    },
}

编辑2

这似乎在我的单元测试中起作用：

describe('The thing', () => {
    it('must be available.', () => {
        const available = true
        const wrapper = shallowMount(MyVueComponent, {
            propsData: { available },
        })
        expect(wrapper.vm.available).to.be.true
    })
})

但是，它正在查看我的/src目录中的实际组件。如果将数据值从true更改为false，我的测试将正确显示。我不确定如何将数据保持在测试级别。因此，如果我要更改const available = false，我的测试应该会失败-但不会。

编辑3

这似乎可行（访问数据对象）：

describe("The thing", () => {
  it("must be available.", () => {
    const defaultData = MyVueComponent.data();
    // const wrapper = shallowMount(MyVueComponent, {});
    expect(defaultData.available).to.be.true;
  });
});

但是我引用我的实际代码，而不是坚持单元测试似乎仍然不正确。

Answer 1

您要检查收到的道具，可以使用wrapper.props()

describe('The thing', () => {
    it('must be available.', () => {
        const available = true
        const wrapper = shallowMount(MyVueComponent, {
            propsData: { available },
        })
        expect(wrapper.props().available).to.be.true
        // or: 
        // expect(wrapper.props().available).to.equal(available)
    })
})

Chai的.to.be.true和.to.equal使用===，因此不需要单独检查它是否确实是布尔值，但是如果您更喜欢它的“表达性”，则可以检查它也是：

expect(wrapper.props().available).to.be.a('boolean')

如何将布尔值传递给Expect语句以使用Mocha / chai进行测试？

1 个答案: