Unable to run Vue component tests with Vitest

Question

I have a project configured as follows:

Vue version: Vue 3
Dev server: Webpack
Testing utils: Vitest, Vue Test Utils

I'm able to write and run tests for simple JavaScript functions, but when I try doing the same for my components, I get the following error:

src/build/PartSelector.test.js [ src/build/PartSelector.test.js ]
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41784:22
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29

I tried installing the plugin mentioned in the error message via npm install "@vitejs/plugin-vue" (without doing anything else), but that did not resolve the error.

Is there a way to resolve this error without having to switch over to Vite? Perhaps there's some additional config required after installing vite-plugin-vue that I don't know about?

Also, here is my vitest.config.ts, if that helps:

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
  },
});

E_net4 · Accepted Answer · 2023-11-07 15:45:47Z

3

I figured it out. Installing the plugin is not enough; it also needs to be included in defineConfig() inside your config (which in my case is vitest.config.ts).

Solution: run npm install "@vitejs/plugin-vue", and then edit vitest.config.ts to include the plugin (see below).

import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue"; // Import the plugin here

export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
  plugins: [vue()], // Include it in your array of plugins here
});

Note that I also needed to set my environment variable inside defineConfig(). If you don't do this, you'll run into a different type of error later on telling you that "document is not defined". More information on that here.

edited Nov 7, 2023 at 15:45

E_net4

30.5k13 gold badges118 silver badges155 bronze badges

answered Nov 6, 2023 at 4:42

user928112

6321 gold badge11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sami Kuhmonen Over a year ago

Reading documentation is vital. Installing a different package than instructed in the error message, and not following the installation instructions for the package does lead to problems. Installing something doesn’t just mean “run npm install”, the usage is described clearly on the page npmjs.com/package/@vitejs/plugin-vue

user928112 Over a year ago

@SamiKuhmonen, appreciate the subtle RTFM/reminder that documentation is important, but do keep in mind that I'm still new to frontend development. What may seem crystal clear to you might seem unclear or ambiguous to me. E.g. the link you posted begins with a snippet of vite.config.js, without any explanation as to what I'm looking at. Furthermore, I don't have a vite.config.ts, nor does that snippet reference defineConfig(), which adds to the confusion for someone in my position.

Collectives™ on Stack Overflow

Unable to run Vue component tests with Vitest

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related