Nuxt - Component/page unit tests

[gabrielrobert]

I'm trying to make component unit tests, however, I can't find a way to do it properly. Are you aware of a way to integrate it using your boilerplate?

Example:

login.vue

<script lang='ts'>
import { Vue } from "vue-property-decorator";
import Component from "nuxt-class-component";

@Component
export default class LoginPage extends Vue {
    login() {
        alert('BLEH!');
    }
}
</script>

login.spec.vue

import { mount } from '@vue/test-utils'
import { assert } from 'chai'
import LoginPage from '~/pages/login.vue'

describe('LoginPage.vue', () => {
  it('renders', () => {
    const wrapper = mount(LoginPage)
    assert.isTrue(wrapper);
  })
})

Error:

C:\dev\test-app\node_modules\typescript\lib\typescript.js:107554
                throw new Error("Could not find file: '" + fileName + "'.");
                      ^
Error: Could not find file: 'C:\dev\test-app\app\pages\login.vue'.
    at getValidSourceFile (C:\dev\test-app\node_modules\typescript\lib\typescript.js:107554:23)
    at Object.getEmitOutput (C:\dev\test-app\node_modules\typescript\lib\typescript.js:108052:30)
    at getOutput (C:\dev\test-app\node_modules\ts-node\src\index.ts:354:30)
    at Object.compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:551:11)
    at Module.m._compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:435:43)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\dev\test-app\node_modules\ts-node\src\index.ts:438:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\dev\test-app\app\pages\login.spec.ts:3:1)
    at Module._compile (module.js:571:32)
    at Module.m._compile (C:\dev\test-app\node_modules\ts-node\src\index.ts:435:23)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .ts] (C:\dev\test-app\node_modules\ts-node\src\index.ts:438:12)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at C:\dev\test-app\node_modules\mocha\lib\mocha.js:250:27
    at Array.forEach (native)
    at Mocha.loadFiles (C:\dev\test-app\node_modules\mocha\lib\mocha.js:247:14)
    at Mocha.run (C:\dev\test-app\node_modules\mocha\lib\mocha.js:576:10)
    at Object.<anonymous> (C:\dev\test-app\node_modules\mocha\bin\_mocha:637:18)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:423:7)
    at startup (bootstrap_node.js:147:9)
    at bootstrap_node.js:538:3

[CKGrafico]

Hello we have examples of unit tests in the store,
can you dblcheck your project and how we are testing stores?

https://github.com/CKGrafico/Frontend-Boilerplates/blob/nuxt-dev/app/store/modules/settings/settings.module.spec.ts

If it stills not working well I will check.

[CKGrafico]

hello?

[gabrielrobert]

@CKGrafico Unit tests for stores are working as expected. However, the same process cannot be applied to Vue components.

[CKGrafico]

mm at this moment we have all the 'data' logic in actions/services/helpers/utils and our ui logic in components.

Some time ago we've moved from:

to:

This mean that we have not tested this behaviour and this is way we didn't detect this bug, we will check asap but is not our highest priority sorry.

[CKGrafico]

Sorry no time for this, thanks for your help