Vue.js单元测试配置遇阻：首次运行测试持续报错求助

Hey there! I totally get how frustrating it is to hit roadblocks when setting up your first Vue unit test. Let's break down the most common fixes based on the directory structure and code you shared.

1. Make Sure You Have All Required Dependencies Installed #

First off, double-check you've installed all the necessary packages. For Vue 2, run this command:

npm install --save-dev jest @vue/test-utils @vue/vue2-jest babel-jest @babel/core @babel/preset-env

If you're using Vue 3, swap out @vue/vue2-jest for @vue/vue3-jest.

2. Configure Your .babelrc File #

Your Babel config needs to target Node.js (since Jest runs in Node). Update your .babelrc to look like this:

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ]
}

3. Set Up Jest Configuration #

You can add Jest settings directly to your package.json or create a separate jest.config.js file. Here's how to add it to package.json:

"jest": {
  "moduleFileExtensions": ["js", "vue"],
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "@vue/vue2-jest" // Use @vue/vue3-jest for Vue 3
  },
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1" // Maps @/ to src/ for easier imports
  },
  "setupFiles": ["<rootDir>/test/setup.js"] // Runs your setup script before tests
}

Don't forget to add a test script to package.json:

"scripts": {
  "test": "jest"
}

4. Update Your Test Setup File #

Your test/setup.js should configure Vue and any global test utilities. For basic setup:

import Vue from 'vue'
import { config } from '@vue/test-utils'

// Optional: Mock global properties (like i18n's $t) if needed
config.global.mocks = {
  $t: (key) => key
}

5. Write a Working Test Example #

Let's fix your test.spec.js to properly test the hello.vue component. Assuming message is a prop (adjust if it's local data):

import { shallowMount } from '@vue/test-utils'
import Hello from '@/components/hello.vue'

describe('Hello.vue', () => {
  it('renders the correct message', () => {
    const testMessage = 'Hello from unit test!'
    const wrapper = shallowMount(Hello, {
      propsData: {
        message: testMessage
      }
    })
    expect(wrapper.text()).toContain(testMessage)
  })
})

If message is local data in the component, you can access it via wrapper.vm.message instead of passing it as a prop.

6. Run Your Test #

Finally, execute your test with:

npm run test

If you're still getting errors, share the exact error message you're seeing—this will help narrow down the issue even more!

内容的提问来源于stack exchange，提问作者hidar