Skip to content

add more info about migrating to nuxt-vitest #510

Open
@VegasChickiChicki

Description

@VegasChickiChicki

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]);
	});
});

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions