New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable Vue-Test-Utils to work with Nuxt #4115
Comments
What have you tried this far? I've been using VTU inside Nuxt projects for a while now. Here are some code sample you might find useful for your setup: .babelrc
package.json{
"jest": {
"setupFiles": [
"<rootDir>/tests/unit/jest.setup.js"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^~/(.*)$": "<rootDir>/client/$1",
"^~~/(.*)$": "<rootDir>/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"collectCoverage": true,
"collectCoverageFrom": [
"client/components/**/*.vue"
]
},
} tests/unit/jest.setup.jsimport Vue from 'vue';
import VueTestUtils from '@vue/test-utils';
Vue.config.silent = true;
// Mock Nuxt components
VueTestUtils.config.stubs['nuxt-link'] = '<a><slot /></a>';
VueTestUtils.config.stubs['no-ssr'] = '<span><slot /></span>'; |
A test example in |
Ah, I tried using babel-jest and vue-jest transformers during my very first attempt. I need to go back and see if I can get that setup working. I don't recall what I was doing wrong. However, in the mean time, I did get an ava + nuxt + vue-test-utils exemplar working: https://github.com/ChrisDillinger/vue2-nuxt-exemplar |
@paulgv Would you be willing to share a repo link with the minimally necessary setup for Nuxt (Universal or SPA) + Jest + Vue Test Utils? |
@ChrisDillinger sure, working on it now, I'll make a PR to add it as an example @manniL. |
There is also downside. Nuxt specific stuff like fetch/asyncData/middleware wont work |
@aldarund True, I actually only test components with VTU usually. Maybe the |
Well, you can test asyncData and fetch (separately) with VTU. The functions are available in the |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
What problem does this feature solve?
I cannot find a working solution that let's me use ava or jest to run unit tests that utilize the Vue Test Utils library. Given that both Vue Test Utils and Nuxt appear to hold strong positions within the Vue community, I think it makes sense to ensure that Vue Test Utils can be utilized for both Nuxt universal and Nuxt SPAs
What does the proposed changes look like?
Nuxt should seamlessly let developers run tests with runners like jest or ava while using Vue-test-utils as well as modern ES features (import statements). Importing .vue SFCs from your test files would work fine, using the import statement would work fine, and utilizing Vue Test Util features like shallowMount would work fine.
The text was updated successfully, but these errors were encountered: