Nuxt - Component/page unit tests
See original GitHub issueI’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:
- Created 5 years ago
- Comments:5 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
Sorry no time for this, thanks for your help