如何在使用 mocha/chai 的 Vue 单元测试中期待布尔属性？

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：预期 { Object (isFunctionalComponent, _emissed, ...) } 为 true

如果我只检查 的值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')