Vue.js testing: props validation,how to test Vue console.error log with JEST

Viewed 2315

During testing my new VueJS project with Jest I encountered problem caused by props validation.

All of my tests that has proper mocked data, pass the validator from component.

I would like to test situation when I mock wrong data and pass it to the component. I know that when the validator from component return false, vue.common.js console.error this:

console.error node_modules/vue/dist/vue.common.js:576
[Vue warn]: Invalid prop: custom validator check failed for prop "SOMETHING".

I would like to catch this error in my Jest test, but none of methods below I've tried work for me:

  1. Using spyOn(console, 'error') and then except(spy.calls.mostRecent()).toHaveBeenCalled().

  2. Registering console.* in globals like this global.console {...}

I have no idea what should I try now or what I am doing wrong.

Thanks for the answers, cheers.

2 Answers

Solved:

I had to use my wrapper.vm object, something like this:

expect(wrapper.vm.$options.props.YOUR_PROPS_OBJECT.validator(YOUR_WRONG_PROPS)).toBe(false);

One more way to deal with validator testing:

the component can be used directly, for instance, if the the component, being tested is named App and the property name is p then

expect(App.props.p.validator(arg)).toBe(res) 

is the test for it.

Related