0

I am using Jest to test this Vue component:

import { mount } from '@vue/test-utils'
import ExampleComponent from '../Components/Example.vue'

describe("Test", () => {
    it('shows no errors', () => {
        jest.spyOn(global.console, 'error');
        jest.spyOn(global.console, 'warn');

        mount(ExampleComponent)

        expect(console.warn).not.toHaveBeenCalled()
        expect(console.error).not.toHaveBeenCalled()
    })
})

I am expecting this test to Fail since I have this component:

Example.vue

<template>
    <div>
        {{ number }}
    </div>
</template>

<script>
export default {}
</script>

as you can see number is not defined, and if opened this component using the browser it will show me:

[Vue warn]: Property or method "number" is not defined on the instance but referenced during render.

but if I test it, the test will pass. How can If the Vue component has warnings or errors?

rook99
  • 1,034
  • 10
  • 34
  • I guess this is a follow-up question. I did a quick check and no, there's a warning, https://repl.it/repls/DecisiveGrowlingSecurity . Make sure you have the latest `@vue/test-utils`. I accidentally installed older `vue-test-utils` and there was no warning, this could be the case. – Estus Flask Feb 22 '20 at 15:27
  • Also notice that this strategy is faulty, you shouldn't expect Vue to behave exactly the same in testing environment, there could be no warnings at all. `vue-test-utils` was designed for unit tests. If you need blackbox tests that behave like real app, consider doing this in real browser with E2E framework. That's where the margin between E2E and unit tests is. – Estus Flask Feb 22 '20 at 15:28
  • @EstusFlask It seems to work fine in your demo. But for some reason It doesn't work in my local env. https://i.imgur.com/Hmtthkq.png. even though I have the latest version of `@vue/test-utils` as your demo. Maybe there is a configuration to be added in `jest.config.js` to capture console errors? – rook99 Feb 22 '20 at 15:50
  • AFAIK error handling should work as is without additional config. I gave it a test on local rig with same results. Check that `@vue/test-utils` is 1.0.0-beta.31 and environment (process.env.NODE_ENV) is `test` and not `production`, it seems they are the only things here that could affect the result. Also try it with plain `Vue.component` like in a demo, just in case .vue file loader compiles a template differently in tests. – Estus Flask Feb 22 '20 at 16:02

0 Answers0