如何为依赖Vuex的Vue登录表单组件编写Jest单元测试？

当然可以测试！哪怕你的登录表单和Vuex store绑定得很深，我们完全可以通过模拟（mock）Vuex的方式来隔离组件，专注测试组件本身的逻辑。下面我给你拆解不同场景的测试用例，还有具体的实现思路：

因为组件依赖Vuex，我们不需要启动完整的真实store，而是通过mock模拟store的state、actions、getters，让组件以为它在和真实store交互。这样就能把组件的行为和store的逻辑隔离开，只聚焦组件自身的渲染、数据绑定、交互逻辑。

1. 基础渲染测试 #

验证表单的核心元素是否正常渲染，初始状态是否符合预期：

• 用户名、密码输入框是否存在
• 登录按钮是否存在
• 初始状态下<flash-message>是否无错误提示

import { mount } from '@vue/test-utils'
import LoginForm from '@/components/LoginForm.vue'

describe('LoginForm', () => {
  it('renders all form elements correctly', () => {
    const wrapper = mount(LoginForm, {
      mocks: {
        $store: {
          state: { auth: { error: null } } // 模拟空错误状态
        }
      }
    })
    // 检查用户名输入框
    expect(wrapper.find('input[name="username"]').exists()).toBe(true)
    // 检查密码输入框
    expect(wrapper.find('input[name="password"]').exists()).toBe(true)
    // 检查登录按钮
    expect(wrapper.find('button[type="submit"]').exists()).toBe(true)
    // 检查初始状态下无错误提示
    expect(wrapper.find('flash-message').props('message')).toBeNull()
  })
})

2. 表单数据绑定测试 #

验证输入框内容能正确同步到组件数据（或Vuex state）：

• 输入用户名后，确认对应的store commit被触发（如果是绑定到store的话）
• 输入密码后，同理验证同步逻辑

it('syncs input values to Vuex store', async () => {
  const mockStore = {
    state: { auth: { username: '', password: '' } },
    commit: jest.fn() // 模拟commit方法
  }
  const wrapper = mount(LoginForm, {
    mocks: { $store: mockStore }
  })
  
  // 输入用户名
  const usernameInput = wrapper.find('input[name="username"]')
  await usernameInput.setValue('test-user')
  expect(mockStore.commit).toHaveBeenCalledWith('auth/SET_USERNAME', 'test-user')
  
  // 输入密码
  const passwordInput = wrapper.find('input[name="password"]')
  await passwordInput.setValue('test-pass')
  expect(mockStore.commit).toHaveBeenCalledWith('auth/SET_PASSWORD', 'test-pass')
})

3. 表单提交逻辑测试 #

分不同场景验证提交行为：

3.1 无效数据场景 #

验证空值或不符合规则的输入不会触发登录action，且错误提示正确显示：

it('shows error when form data is invalid', async () => {
  const mockStore = {
    state: { auth: { error: '请填写完整的用户名和密码' } },
    dispatch: jest.fn() // 模拟dispatch方法
  }
  const wrapper = mount(LoginForm, {
    mocks: { $store: mockStore }
  })
  
  // 直接点击登录，不输入任何内容
  await wrapper.find('button[type="submit"]').trigger('click')
  
  // 确认未触发登录action
  expect(mockStore.dispatch).not.toHaveBeenCalled()
  // 确认错误提示显示
  expect(wrapper.find('flash-message').props('message')).toBe('请填写完整的用户名和密码')
})

3.2 有效数据场景 #

验证有效输入会触发登录action，且登录成功后触发页面重定向：

it('triggers login action and redirects on success', async () => {
  const mockStore = {
    state: { auth: { error: null } },
    dispatch: jest.fn().mockResolvedValue(true) // 模拟登录成功的Promise
  }
  const mockRouter = {
    push: jest.fn() // 模拟路由跳转方法
  }
  const wrapper = mount(LoginForm, {
    mocks: { 
      $store: mockStore,
      $router: mockRouter
    }
  })
  
  // 填写有效数据
  await wrapper.find('input[name="username"]').setValue('valid-user')
  await wrapper.find('input[name="password"]').setValue('valid-pass')
  
  // 点击登录按钮
  await wrapper.find('button[type="submit"]').trigger('click')
  
  // 确认调用了登录action，且参数正确
  expect(mockStore.dispatch).toHaveBeenCalledWith('auth/login', {
    username: 'valid-user',
    password: 'valid-pass'
  })
  
  // 确认重定向到仪表盘
  expect(mockRouter.push).toHaveBeenCalledWith('/dashboard')
})

3.3 登录失败场景 #

验证登录失败时错误提示正确显示，且不会触发重定向：

it('shows error message when login fails', async () => {
  const mockError = '用户名或密码错误'
  const mockStore = {
    state: { auth: { error: mockError } },
    dispatch: jest.fn().mockRejectedValue(new Error(mockError))
  }
  const mockRouter = {
    push: jest.fn()
  }
  const wrapper = mount(LoginForm, {
    mocks: { 
      $store: mockStore,
      $router: mockRouter
    }
  })
  
  // 填写错误数据并提交
  await wrapper.find('input[name="username"]').setValue('wrong-user')
  await wrapper.find('input[name="password"]').setValue('wrong-pass')
  await wrapper.find('button[type="submit"]').trigger('click')
  
  // 确认错误提示显示
  expect(wrapper.find('flash-message').props('message')).toBe(mockError)
  // 确认未触发重定向
  expect(mockRouter.push).not.toHaveBeenCalled()
})

总的来说，核心就是通过mock Vuex的store、actions、commit以及路由对象，把组件和外部依赖完全隔离开，这样就能不依赖真实store或后端接口，完成所有核心场景的测试。

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