Перегрузка не соответствует этому вызову в библиотеке реагирующего тестирования

Question

Я использую React Testing Library. Всякий раз, когда я пытаюсь импортировать класс в тестовый файл, выдается сообщение об ошибке:

Никакая перегрузка не соответствует этому вызову. Перегрузка 1 из 2 '' . >>): NewQuestion ', выдал следующую ошибку. Типу «{}» не хватает следующих свойств из типа «Только для чтения» и {onSave: (post: {fullName: строка; заголовок: строка; тело: строка; creationAt: string; updatedAt: string;}) => void; } & RouteComponentProps <... >> ': история, местоположение, совпадение, перегрузка onSave 2 из 2,' (props: RouteComponentProps <{}, StaticContext, PoorMansUnknown> & {onSave: (post: {fullName: string; title: string; body: string; creationAt: string; updatedAt: string;}) => void;} & RouteComponentProps <...>, context ?: any): NewQuestion ', выдал следующую ошибку.

Приложение работает абсолютно нормально, и у меня возникают проблемы только при написании тестов.

И мой тестовый файл выглядит так:

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 part".

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.

Ошибка, которую вы видите, потому что вы не предоставили необходимые реквизиты (вам нужен маршрут props и onSave, поскольку вы не указали их как опциональные).

Для реквизитов маршрута я рекомендую использовать обертку Router (см. здесь: 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