Description
Error message:
TypeError: Package import specifier "#app/entry" is not defined in package C:\Users\dodaa\WebstormProjects\nuxt-3-template\node_modules\vitest-environment-nuxt\package.json imported from C:\Users\dodaa\WebstormProjects\nuxt-3-template\node_modules\vitest-environment-nuxt\dist\index.mjs
❯ new NodeError node:internal/errors:387:5
❯ throwImportNotDefined node:internal/modules/esm/resolve:354:9
❯ packageImportsResolve node:internal/modules/esm/resolve:737:3
❯ moduleResolve node:internal/modules/esm/resolve:895:21
❯ defaultResolve node:internal/modules/esm/resolve:1115:11
❯ nextResolve node:internal/modules/esm/loader:163:28
❯ ESMLoader.resolve node:internal/modules/esm/loader:837:30
❯ ESMLoader.getModuleJob node:internal/modules/esm/loader:424:18
❯ ESMLoader.import node:internal/modules/esm/loader:521:22
❯ importModuleDynamically node:internal/modules/esm/translators:110:35
Package file:
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"start": "nuxt start",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"eslint": "eslint . --ext js --ext vue",
"eslint:fix": "eslint . --ext js --ext vue --fix",
"stylelint": "npx stylelint \"**/*.{css,scss,vue}\"",
"stylelint:fix": "npx stylelint \"**/*.{css,scss,vue}\" --fix",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build -s ./public,./assets",
"test:unit": "vitest --config ./vitest.config.js"
},
"devDependencies": {
"@nuxt/test-utils": "^3.5.1",
"@nuxtjs/eslint-module": "^4.0.2",
"@storybook/addon-essentials": "^7.1.0-alpha.39",
"@storybook/vue3": "^7.1.0-alpha.39",
"@storybook/vue3-vite": "^7.1.0-alpha.39",
"@types/node": "^18",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/test-utils": "^2.3.2",
"eslint": "^8.42.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-storybook": "^0.6.12",
"eslint-plugin-vue": "^9.10.0",
"jsdom": "^22.1.0",
"nuxt": "^3.6.0",
"nuxt-vitest": "^0.8.5",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"storybook": "^7.1.0-alpha.39",
"stylelint": "^15.4.0",
"stylelint-config-prettier-scss": "^1.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard-scss": "^9.0.0",
"stylelint-order": "^6.0.3",
"stylelint-scss": "^5.0.1",
"typescript": "^5.1.3",
"vite": "^4.3.9",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.30.1"
},
"dependencies": {
"@vuelidate/core": "^2.0.2",
"@vuelidate/validators": "^2.0.2",
"axios": "^1.4.0",
"jwt-decode": "^3.1.2",
"maska": "^2.1.9",
"nuxt-icons": "^3.2.1",
"vuex": "^4.1.0"
},
"overrides": {
"vue": "latest"
}
}
test file:
// @vitest-environment nuxt
import { describe, it } from 'vitest';
import { mount } from '@vue/test-utils';
import { vMaska } from 'maska';
import VPhoneForm from './v-phone-form.vue';
const phoneValue = '+71002003040';
const phoneIncorrectValue = 'bad value';
describe('v-phone-form', () => {
it('renders the component correctly', () => {
const wrapper = mount(VPhoneForm, {
global: {
directives: {
maska: vMaska
}
}
});
const phoneForm = wrapper.find('[data-testid="phone-form"]');
const inputPhoneInput = wrapper.find('[data-testid="input-text-input"]');
const submitButton = wrapper.find('[data-testid="phone-form-submit-button"]');
expect(phoneForm.exists()).toBeTruthy();
expect(inputPhoneInput.exists()).toBeTruthy();
expect(submitButton.exists()).toBeTruthy();
});
it('shows error text when phone is incorrect', async () => {
const wrapper = mount(VPhoneForm, {
global: {
directives: {
maska: vMaska
}
}
});
const submitButton = wrapper.find('[data-testid="phone-form-submit-button"]');
const inputPhone = wrapper.find('[data-testid="input-text"]');
await submitButton.trigger('submit');
expect(inputPhone.classes()).toContain('input-text--error');
});
it('hides error text when phone is entered correctly', async () => {
const wrapper = mount(VPhoneForm, {
global: {
directives: {
maska: vMaska
}
}
});
const inputPhone = wrapper.find('[data-testid="input-text"]');
const inputPhoneInput = wrapper.find('[data-testid="input-text-input"]');
const inputPhoneHelperTextContent = wrapper.find('[data-testid="input-text-helper-text-content"]');
const submitButton = wrapper.find('[data-testid="phone-form-submit-button"]');
await submitButton.trigger('submit');
await inputPhoneInput.setValue(phoneValue);
expect(inputPhone.classes()).not.toContain('input-text--error');
expect(inputPhoneHelperTextContent.exists()).toBeFalsy();
});
it('checks phone input when entering a non-number value', async () => {
const wrapper = mount(VPhoneForm, {
global: {
directives: {
maska: vMaska
}
}
});
const inputPhoneInput = wrapper.find('[data-testid="input-text-input"]');
await inputPhoneInput.setValue(phoneIncorrectValue);
expect(inputPhoneInput.element.value).not.toBe(phoneIncorrectValue);
});
it('emits a "check-phone" event when the form is submitted', async () => {
const wrapper = mount(VPhoneForm, {
global: {
directives: {
maska: vMaska
}
}
});
const inputPhoneInput = wrapper.find('[data-testid="input-text-input"]');
const submitButton = wrapper.find('[data-testid="phone-form-submit-button"]');
await inputPhoneInput.setValue(phoneValue);
await submitButton.trigger('submit');
await wrapper.vm.$nextTick();
expect(wrapper.emitted()).toHaveProperty('check-phone');
expect(wrapper.emitted()['check-phone'][0]).toEqual([true]);
});
});