question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt - Component/page unit tests

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
CKGraficocommented, Aug 10, 2018

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:

from

to:

from

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.

0reactions
CKGraficocommented, Oct 30, 2018

Sorry no time for this, thanks for your help

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction - Test utilities - Nuxt
Easily create tests for your Nuxt projects and modules.
Read more >
Component testing in Nuxt.js with Jest - LogRocket Blog
Set up a game store application with the Nuxt.js framework and test its components. We'll also explore Vuetify and Vuex.
Read more >
How to test nuxt.js asyncData and fetch hooks - Stack Overflow
import shallowMount & component/page to be tested const wrapper ... UNIT TEST: To test them you have to trigger them yourself.
Read more >
Unit testing / component testing components in Nuxt/Vue : r/Nuxt
What I want to do is quite simple, select a page/component, feed in the data, then run some assertions to make sure it...
Read more >
Frontend Handbook | React / Testing best practices - Infinum
Tools we use for testing are React-Testing-Library and Jest. Video guide. If you want to see more practical usage, here is the recording ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found