-
Notifications
You must be signed in to change notification settings - Fork 79
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
support for unit testing in a nuxt environment #349
Comments
How do you not use auto-import functionality to import |
You can import it from |
I've managed to import the methods from There is also no Any idea why the paths resolve when running on the dev/production server but don't when running tests? module.exports = {
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/$1",
"^~/(.*)$": "<rootDir>/$1",
"^vue$": "vue/dist/vue.common.js",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
"^#app": "node_modules/@nuxt/bridge/dist/runtime/index",
},
watchman: true,
moduleFileExtensions: ["ts", "js", "vue", "json"],
transform: {
"^.+\\.ts?$": "ts-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
},
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
collectCoverage: false,
collectCoverageFrom: [
"<rootDir>/components/**/*.vue",
"<rootDir>/pages/**/*.vue",
],
setupFiles: ["<rootDir>/tests/setup.ts"],
} |
Hi @aseidma, this config has worked for me: File module.exports = {
setupFiles: ['<rootDir>/jest.setup.js'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
'^utils/(.*)$': '<rootDir>/utils/$1',
'#app': '@nuxt/bridge/dist/runtime/index',
},
moduleFileExtensions: ['ts', 'js', 'vue', 'json', 'mjs'],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
'.*\\.(mjs)$': 'babel-jest',
},
transformIgnorePatterns: [
'node_modules/(?!@nuxt)/',
],
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
'<rootDir>/utils/**/*.ts',
],
testEnvironment: 'jsdom',
}; File import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI) File module.exports = {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": true
}
}
]
]
}; However, I am unable to test functions as Thank you! |
I was able to map the // jest.config.js
moduleNameMapper: {
"^@/(.*)": "<rootDir>/$1",
"#app": "<rootDir>/node_modules/nuxt3/dist/app/index.mjs",
"#imports": "<rootDir>/node_modules/nuxt3/dist/pages/runtime/composables.mjs",
}, But to make this work I need to include an import statement in my Vue file so jest has a reference to the module. import { useRouter } from "#imports" // This needs to be used in my setup script This works, but now I've lost the convenience of auto-importing if I want Jest to have a reference to the If anyone has any updates or progress on supporting auto-imports in a test env, I'm all ears. |
What works for auto-imports is to add methods to global.useRuntimeConfig = () => constructConfig() It would be nice if nuxt would provide helper utils to make this easier. |
Just wanting to add that this is quite a crucial feature to have, because right now we can't run component tests in nuxt3. Vitest also doesn't know about the magic auto-imports, so I think it would be nice if Nuxt3 exposed a method that we can call in vitest for this. Edit: I've found that the |
Would like to add that, l also get the same problem with storybook on Nuxt 3
It also feels like this auto import feature breaks the benefit of composition api to see where imports are from. (Just thinking out loud) |
For vitest, using I found a clue that you could set similar config to what you'd set in jest using @TheDutchCoder would you share your config here, if you could get it to work? Thx |
Any update for this issue? |
I have a similar issue trying to test useStorage. Here is a reproduction. storage.test.ts includes what I'm trying to do, the other tests are attempts to find a workaround but all tests fail. |
Am I correct in saying that Jest testing isn't supported yet in Nuxt 3? The installation document seems a little thin on the ground. |
There are both jest + vitest drivers for Nuxt e2e testing. |
I followed the guide, but I get the error The test spec is in the directory |
Ah, yes. Jest does struggle with ESM. That's not an issue with Nuxt, per se, but it's a tricky one. There are various guides online. |
Is it planned to tackle this for the final release? There are numerous discussions on how to get unit tests working with auto-imports: https://github.com/nuxt/framework/discussions?discussions_q=test+imports The only thing I found working (for vitest) is stubbing everything manually via vi.stubGlobal('useNuxtApp', () => ({
$colors: {
'super-color': 'blue',
},
})); Or am I missing something? |
In case that might be useful, here's my solution: https://github.com/nuxt/framework/discussions/5379#discussioncomment-4224823 |
What is the status of this issue? Is any attempt made to add support for this? Nuxt seems to be a wonderful solution, but lacking the ability of unit testing seems to be a I have tried adding aliases and made several other attempts to get this to work (including manual mapping), however, even with fixing the #import issue, I get the same issue like @silencerspirit has. |
Hello! We are running into the same issue as described here, but we can't seem to get any of the aforementioned workarounds working. Could we perhaps have any update on the status of this issue? Testing is, imo, very much an important part of modern software design, so I feel this is a lacking feature. |
This comment was marked as duplicate.
This comment was marked as duplicate.
For those who can't see the status, I'm working on this issue at the moment - which I think is pretty important. Here's a spoiler: https://twitter.com/danielcroe/status/1590490011501142017. |
Hi @danielroe - thanks for working on this. I think it's pretty important too.
It now doesn't seem to work with the error
But in the issue you just linked, it seems we also can't install the |
Interestingly, I reinstalled the test-utils-edge and I'm still having that failed to load issue :( Edit: sorry for this, was a frustrating issue but forgot I had started to write a unit test and wasn't mocking the import yet. That's what was causing the issue. When running tests using the test-utils, and setting up the nuxt app, it does seem to work. It's just when I am doing simple unit tests I will be mocking all imports, which is the best way in any case I feel for unit testing |
Is there any progress on this? Not be able to unit-test really is a blocker. |
I've open-sourced an experimental library for testing/feedback: At this point please treat this as a playground + a request for comment. Any feedback would be very welcome 😊 |
I followed the instructions and added vitest-environment-nuxt to my existing Nuxt3 project.
Followed these instructions:
The I think I am doing something wrong. Do you have any suiggestions? |
I think you first need to |
Thanks, installed Vitest and after that
Is this an easy fix by adding some config items to |
Let's reserve this issue for tracking any issues in nuxt core. If you could move the discussion to https://github.com/danielroe/vitest-environment-nuxt/ that would be much appreciated 🙏 |
@leunis have you tried something like this? // vitest.config.ts
test: {
setupFiles: "vuetify.config.js",
deps: {
inline: ["vuetify"],
},
globals: true,
}, // vuetify.config.js
global.CSS = { supports: () => false }; |
@danielroe does it makes sense to open-up discussions on https://github.com/danielroe/vitest-environment-nuxt ? |
https://github.com/danielroe/vitest-environment-nuxt is on a good way! |
I'm also trying to run simple unit tests for this app: I would not expect this to be so challenging. I've tried with Jest and now I'm trying with Vitest. |
any updates? we are using Nuxt 3 for an Entreprise project and not being able to run unit tests is a blocker, I appreciate your efforts guys, can anyone help? |
Did you check out https://github.com/danielroe/nuxt-vitest? It has some quirks, but helps greatly to perform unit tests. |
Thanks, @MrKoopie , it works fine so far. |
Closing to track in #297. The next version of nuxt/test-utils will include support for unit testing in a vitest environment, with a refactor of |
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Describe the feature
Unit testing (e.g. [parts of ]composables or server functions) doesn't require a full built of nuxt.
Originally posted by @pi0 in vitest-dev/vitest#2044 (comment)
Tasks
Related: https://github.com/nuxt/nuxt.js/issues/13077 (auto-import issues when testing components)
issue description from nuxt/nuxt#14972 - @tobiasdiez
The text was updated successfully, but these errors were encountered: