在反应测试库中没有重载匹配此调用

Question

我正在使用 React 测试库。每当我尝试将 class 导入测试文件时，它都会给出错误说明：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<RouteComponentProps<{}, StaticContext, PoorMansUnknown> & { onSave: (post: { fullName: string; title: string; body: string; createdAt: string; updatedAt: string; }) => void; } & RouteComponentProps<...>>): NewQuestion', gave the following error.
    Type '{}' is missing the following properties from type 'Readonly<RouteComponentProps<{}, StaticContext, PoorMansUnknown> & { onSave: (post: { fullName: string; title: string; body: string; createdAt: string; updatedAt: string; }) => void; } & RouteComponentProps<...>>': history, location, match, onSave
  Overload 2 of 2, '(props: RouteComponentProps<{}, StaticContext, PoorMansUnknown> & { onSave: (post: { fullName: string; title: string; body: string; createdAt: string; updatedAt: string; }) => void; } & RouteComponentProps<...>, context?: any): NewQuestion', gave the following error.

该应用程序运行良好，我只是在编写测试时遇到问题。

我的测试文件是这样的：

import Abc from './Abc'
import { render, cleanup, fireEvent } from "react-testing-library";
import React from 'react';
import '@testing-library/jest-dom/extend-expect';

test (' Abc', ()=> {
const { getByPlaceholderText, getByText } = render(<NewQuestion />);})

我在“NewQuestion 部分”的最后一行出现错误。

Answer 1

首先你可以简化这个：

export default class NewQuestion extends React.Component < Props & RouteComponentProps > {

仅：

export default class NewQuestion extends React.Component < Props > {
since props already includes the ReactRouter props.

你看到的错误是因为你没有提供必要的道具（你需要路由道具和 onSave 因为你没有把它们作为可选）。

对于路由道具，我建议使用路由器包装器（请参阅此处：https://testing-library.com/docs/example-react-router#__docusaurus），对于 onSave 只需传递 jest.fn()（然后您可以断言它是否被调用以及使用什么参数。)

完整示例：

import NewQuestion from './NewQuestion'
import React from 'react'
import { Router } from 'react-router-dom'
import { createMemoryHistory } from 'history'
import { render, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import { LocationDisplay, App } from './app'

test('NewQuestion', () => {
  const history = createMemoryHistory()
  const { getByPlaceholderText, getByText } = render(
    <Router history={history}>
      <Route render={(props) => <NewQuestion {...props} onSave={jest.fn()}} /> />
    </Router>
  )
})

希望这对您有所帮助。

Answer 2

检查您的文件后缀以确保它是 .tsx

在反应测试库中没有重载匹配此调用

No overload matches this call in react testing library

unit-testing

typescript

reactjs

react-testing-library