Jest测试中操作mock的window navigator对象报undefined错误如何解决

报错原因 #

你当前 mock 的 navigator.clipboard.writeText 是无返回值的空函数，而业务代码中调用该方法后链式调用了.then()，空函数返回undefined，自然无法读取undefined上的then属性。

修复方案 #

只需调整测试中writeText的 mock 逻辑，让它返回Promise对象即可，同时因为涉及异步逻辑，测试用例需要改为异步格式避免断言时序问题。

修改后的测试代码如下：

import React from 'react';
import { mount } from 'enzyme';
import A from '../../../src/components/A';

jest.mock('../../Button', () => ({
  Button: 'button',
}));

Object.defineProperty(navigator, "clipboard", {
  value: {
    // 这里修改为返回resolve状态的Promise，对应复制成功场景
    // 如果要测试复制失败场景，可以改为 () => Promise.reject()
    writeText: () => Promise.resolve(),
  },
});

const writeTextSpy = jest.spyOn(navigator.clipboard, "writeText");

describe('A component test', () => {
  const props = {
    text: 'mock',
  };

  // 测试用例改为异步
  it('should copy to clipboard as expected', async () => {
    const renderedModule = mount(<A {...props} />);

    renderedModule.find('button').simulate('click');
    // 等待Promise回调执行完成
    await Promise.resolve();
    expect(writeTextSpy).toBeCalledTimes(1);
    // 还可以加额外断言验证copyStatus是否符合预期
  });
});

额外注意事项 #

你提供的组件代码中还有一处语法错误：return 里直接写{CopyBtn}是错误的，CopyBtn是你定义的组件，应该改为<CopyBtn />，否则组件不会正常渲染。

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