在模拟 window 导航器对象上操作时出现未定义错误

Question

我有以下组件，在单击按钮时，我希望将文本值复制到剪贴板。

这工作正常，希望为它编写测试。但是目前在我的测试中，不断出现以下错误：

Error: Uncaught [TypeError: Cannot read property 'then' of undefined]

还尝试了此处建议的其他示例，结果相同。

请问我做错了什么可以得到一些帮助吗？谢谢。

我的组件

import React, { useState } from 'react';
import { Button } from '../../Button';

const A = ({
  text,
}) => {
  const [copyStatus, setCopyStatus] = useState('');
  const onClick = () => {
    window.navigator.clipboard.writeText(text)
      .then(() => {
        setCopyStatus('yes');
      })
      .catch(() => setCopyStatus('no'));
  };

  const CopyBtn = () => (
    <Button onClick={onClick}>
      Click
    </Button>
  );

  return (<div>
    {CopyBtn}
  </div>);
};

export default A;

我的测试

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

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

Object.defineProperty(navigator, "clipboard", {
  value: {
    writeText: () => {},
  },
});

jest.spyOn(navigator.clipboard, "writeText");

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

  it('should copy to clipboard as expected', () => {
    const renderedModule = mount(<A {...props} />);

    // simulate does work. Which triggers the attempt to call navigator.clipboard.writeText and fails. 
    renderedModule.find('button').simulate('click');
    expect(navigator.clipboard.writeText).toBeCalledTimes(1);
  });
});

Answer 1

模拟函数正在被实际调用，它需要 return 一个 Promise。

您可以使用 jest.fn 模拟函数行为。

Object.defineProperty(navigator, "clipboard", {
  value: {
    // Provide mock implementation
    writeText: jest.fn().mockReturnValueOnce(Promise.resolve(42)),
  },
});

那你就不用调用jest.spyOn了。

在模拟 window 导航器对象上操作时出现未定义错误

Getting undefined error when operating on a mocked window navigator object

javascript

reactjs

jestjs