Bug: Render Function Wrapper Typescript Issue

[akashshyamdev]

• @testing-library/react version: ^11.1.0
• Testing Framework and version(JEST): ^26.6.0
• Dom ENV: JS dom(default, no specific config)

Relevant code or config:

import { render as rtlRender, RenderOptions, screen } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import React, { Component, ReactElement } from 'react';
import { Router } from 'react-router-dom';
import App from './App';

type DefaultOptions = Omit<RenderOptions, 'queries'> & { route: string };

const render = (ui: ReactElement, options?: DefaultOptions) => {
  const history = createMemoryHistory({ initialEntries: [options?.route || '/'] });

  const Wrapper = ({ children }: { children: ReactElement }) => {
    return <Router history={history}>{children}</Router>;
  };

  return rtlRender(ui, { wrapper: Wrapper, ...options });
};

test('renders to screen', () => {
  render(<App />);

  expect(screen.getByTestId('router')).toBeInTheDocument();
});

What happened:

This is a typescript error. check the screenshot below for the error:

Problem description:

I believe the problem is coming from here:

Suggested solution:

I believe that this can be solved easily by a simple change. I've changed the wrapper type from React.ComponentType to JSX.Element. Is this a bug or is this being done intentionally?

[kentcdodds]

I literally just ran into this myself. The proper fix should probably be: wrapper?: (props: {children: React.ReactNode}) => JSX.Element. I'll make a PR.

[akashshyamdev]

Thanks @kentcdodds 👍 . btw, I'm coming from your course and it's absolutely great! Are there any pending beginner friendly issues/tasks which I could work on?

[kentcdodds]

Awesome! I'm afraid that I don't maintain this project anymore much so I can't really recommend something to you for this project. But Hactoberfest is coming soon. Maybe you'll find something there :)

[eps1lon]

@all-contributors add @akashshyamdev for bug

[allcontributors]

@eps1lon

I've put up a pull request to add @akashshyamdev! 🎉

[akashshyamdev]

Thanks @eps1lon. btw, Are there any pending beginner friendly issues/tasks which I could work on?

[github-actions]

🎉 This issue has been resolved in version 12.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 13.0.0-alpha.7 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀