unit-testingvue.jsmocha.jschai

How to expect a boolean prop in my Vue unit test using mocha/chai?


Using Vue CLI I have a unit test that I am trying to check for a true/false that looks like this:

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

When I run npm run test:unit

I get the following:

AssertionError: expected { Object (isFunctionalComponent, _emitted, ...) } to be true

If I just check the value of available, then it's all good. But that seems like I'm doing it wrong.

Other tests I have written are working fine as I am checking for a text value:

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

I am not sure how to check that the available is a boolean and it must be true. Any suggestions would be appreciated!

EDIT

This is what my Vue component looks like:

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

EDIT 2

This seems to work in my unit test:

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

However, it is looking at my actual component in my /src directory. If I change the data values from true to false my tests come out correctly. I'm not sure how to have the data stay at the test level. So if I were to change const available = false, my test should fail--but it does not.

EDIT 3

It seems like this works (to access the data object):

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

But it still seems not right that I'm referencing my actual code, and not sticking within the unit tests.


Solution

  • You want to check the received prop, which you can do with 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's .to.be.true and .to.equal use === so there is no need to separately check that it is indeed a Boolean, but if you prefer the "expressiveness" of it, you can check it too:

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