使用 Jest 测试反应组件中的功能答案

【问题标题】：Testing a function in a react component with Jest使用 Jest 测试反应组件中的功能
【发布时间】：2020-11-28 07:14:02
【问题描述】：

我对使用 React 组件进行单元测试还很陌生。我有一个反应组件，它在单击时从道具中复制给定的 id。那就是从一个单独的文件中调用一个函数来执行一个 copyToClipboard 函数，然后将一个反应组件的状态设置为“已复制”。我正在尝试测试这些功能，并可能将状态值更改为“已复制”。每当我尝试模拟 onclick 函数时，它都会给出错误消息“无法读取未定义的属性 'writeText'”。这是因为 onClick 函数为此进程调用了一个单独的函数，是否可以模拟其他函数并将其传递给 onClick() 函数或其他解决方案？或者任何指针我应该如何前进？

App.js

import React from "react";
import "./styles.css";
import {copyToClipboard} from './CopyFile'
export default function App({id}) {
  const [copyStatus, setCopyStatus] = useState('')

  const copyLineItemId=(id)=>{
    copyToClipboard(id)
    setCopyStatus('Copied')
    setTimeout(function () {
      setCopyStatus('')
    }, 2000)
  }

  return (
    <div>
      <i id="copy" className="fa fa-copy" onClick={() =>copyLineItemId({id})}></i>
      <p id="status">{copyStatus}</p>
  </div>
  );
}

测试文件

import React from 'react'
import { mount } from 'enzyme'
import { MockedProvider } from '@apollo/react-testing'

function getComponent(props) {
  const { componentProps } = props
  return (
    <MockedProvider>
      <CopyComponent {...componentProps} />
    </MockedProvider>
  )
}


test('copy function', () => {
    const componentProps = {
      id:123
    }

    const wrapper = mount(getComponent({ componentProps }))

    wrapper.find("#copy").simulate('click')

    expect(wrapper.find("#status")).toEqual("Copied")
  })

复制函数CopyFile.js

const copyToClipboard = (arg) => {
  navigator.clipboard.writeText(arg)
}

export {copyToClipboard}

【问题讨论】：

标签： reactjs mocking jestjs enzyme

【解决方案1】：

在 JSdom 中 navigator.clipboard.writeText() 没有定义，所以你必须自己定义它，像这样：

Object.assign(navigator, {
  clipboard: {
    writeText: () => {},
  },
});

【讨论】：