Vue组件测试报错：TypeError: this.$refs.modal.open不是函数

出现这个错误的核心原因是测试环境里，ModalDetails组件的$refs.modal要么未被正确渲染，要么没有模拟出open方法。以下是具体解决办法：

• 模拟子组件的open方法
  如果modal是第三方UI组件或自定义子组件，测试时无需渲染真实组件，直接用stubs替换并模拟open方法，或者通过mocks直接注入假的$refs：

  describe('ModalDetails', () => {
    let wrapper: Wrapper<Vue>;
    let store: Store<any>;
    const mockModal = { open: jest.fn() };
  
    beforeEach(() => {
      wrapper = mount(ModalDetails, {
        localVue,
        store,
        // 替换Modal组件为带open方法的模拟组件
        stubs: {
          Modal: {
            template: '<div></div>',
            methods: { open: jest.fn() }
          }
        },
        // 或者直接注入mock的$refs
        mocks: {
          $refs: { modal: mockModal }
        }
      });
    });
  
    it('调用modal的open方法在mounted阶段', () => {
      expect(mockModal.open).toHaveBeenCalled();
    });
  });
  

• 确认模板中存在ref="modal"的元素
  检查ModalDetails的模板代码，确保确实有带有ref="modal"的组件/元素，且该组件原生具备open方法——如果模板里漏写了ref="modal"，必然会导致找不到对应实例。

• 手动赋值$refs（备选方案）
  如果上述方法不生效，可在挂载后手动给组件的$refs赋值：

  beforeEach(() => {
    wrapper = mount(ModalDetails, {
      localVue,
      store,
      stubs: { Modal: true }
    });
    // 手动注入带open方法的mock对象
    (wrapper.vm.$refs as any).modal = { open: jest.fn() };
    // 重新触发mounted钩子
    wrapper.vm.$mount();
  });
  

内容的提问来源于stack exchange，提问作者H.A.