【问题标题】：No overload matches this call in jest开玩笑说没有重载匹配这个调用
【发布时间】：2021-12-11 07:46:47
【问题描述】：

我是新来的反应和开玩笑，我现在不使用酶

我面临的错误是没有重载匹配此调用。 'Overload 1 of 2, '(props: XProperty| Readonly ): BuildingUnit'，给出了以下错误。类型“{}”缺少“只读”类型的以下属性：ab、cd Overload 2 of 2, '(props: XProperty, context: any): BuildingUnit'，给出了以下错误。类型“{}”缺少“只读”类型的以下属性：ab、cd'

类 BuildingUnit：

    type XProperty= { ab, cd};
    type YProperty= {ef, gh};
    
        class BuildingUnit extends React.Component<XProperty, YProperty>{
        
             methodA(){
            
             }
             Method B(){
       
             }
             render(){
           <input text onChange={this.MethodA}>
             }
        }
export default BuildingUnit;

当我尝试通过渲染从标签中获取文本时，它会引发错误“没有重载匹配此调用” 而且我还想知道如何在 BuildUnitTest 中访问 MethodA() 以进行断言 BuildUnit.test.js：

import BuildingUnit  from './BuildingUnit';
import React, { useImperativeHandle } from 'react';
import * as ReactDOM from 'react-dom';
import { fireEvent, render, screen } from '@testing-library/react';

test('Validation', ()=>{
    
    const root = document.createElement("div");
    const {getByText, getByLabelText}= render(<BuildingUnit/>);
  
})

【问题讨论】：

听起来你真的有两个问题。如果我理解正确，您无法让组件工作，因为它认为它没有正确的道具？第二个问题是如何直接测试MethodA？我想查看有关第一个问题的更多详细信息。我不清楚这是测试中的问题还是源代码本身的问题。
不，源代码运行良好，没有任何问题。它有正确的道具。但我的问题是当我尝试使用“渲染（）”时，它给了我一个缺少道具类型的错误。那么如何在测试类中定义道具类型

标签： reactjs testing jestjs

【解决方案1】：

没有重载匹配...

鉴于您已指出您的BuildingUnit.spec.js 文件是.js 而不是.ts，我觉得您收到这个消息很奇怪。撇开这种奇怪的事不谈，事实是您没有在测试代码中提供 BuildingUnit 任何道具：

const {getByText, getByLabelText}= render(<BuildingUnit/>);

但是在您的源代码中，您已经创建了 BuildingUnit 类并键入了它的 props 以具有两个键，ab 和 cd：

    type XProperty= { ab, cd};
    type YProperty= {ef, gh};
    
    class BuildingUnit extends React.Component<XProperty, YProperty>{
        // ...
    }

强调React.Component<XProperty //, ...> 位。

在测试中，您可以像在源代码中一样分配道具，并且您需要这样做才能使测试正常工作：

const {getByText, getByLabelText}= render(<BuildingUnit ab="some ab value" cd="some cd value" />);

如何访问 methodA 进行测试

TL;DR

您可能不应该直接访问methodA。你已经加入了react-testing-library，所以用它来interact with your component，然后断言发生了什么变化。

因此，如果 BuildingUnit 呈现 textarea，请使用 react-testing-library 输入该文本区域，然后断言会发生什么。例如，如果 methodA 应该在更改时触发对 API 的调用，请使用 jest.fn() 然后 expect(myAPI.postChanges).toHaveBeenCalled() 或类似方法模拟该 API。

对于一般性建议，我们深表歉意，但代码示例非常笼统，因此没有太多内容可做，但最重要的是react-testing-library 鼓励您以用户的方式与组件交互（通过键入、单击等），然后测试会发生什么。 UI 是 React 组件的公共接口，这就是你应该测试的。

没有重载匹配...

如何访问 methodA 进行测试

TL;DR

更多详情