React Router ile React Testing Library örnek kodu için yanlış TypeScript overload imzası
React Testing Library belgelerinde, React Router kullanan bileşenler için birim testleri yazma konusunda bu örnek bulunmaktadır. Daha spesifik olarak, bu hazır şablon snippet'ine değinmektedir:
// test utils file
function renderWithRouter(
ui,
{
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
} = {}
) {
const Wrapper = ({ children }) => (
<Router history={history}>{children}</Router>
)
return {
...render(ui, { wrapper: Wrapper }),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
history,
}
}
Aşağıdakilere dayalı olarak, history paketinden createMemoryHistory fonksiyonunun ve @testing-library/react paketinden render fonksiyonunun tip imzası şudur:
export type RenderResult<Q extends Queries = typeof queries> = {...}
export function render(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult;
export function render<Q extends Queries>(ui: React.ReactElement, options: RenderOptions<Q>): RenderResult<Q>;
Yukarıdaki test araç kod parçasını TypeScript koduna dönüştürmeye çalıştım. Şunu buldum:
import { Queries, render, RenderOptions, RenderResult, queries } from "@testing-library/react"
import { createMemoryHistory, LocationState, MemoryHistory } from "history"
import React from "react"
import { Router } from "react-router-dom"
export type RouterOptions<S = LocationState> = {
route: string,
history?: MemoryHistory<S>
}
export type RenderWithRouterResult<Q extends Queries, S = LocationState> = RenderResult<Q> & {history: MemoryHistory<S>}
export function renderWithRouter<S>(ui: React.ReactElement, options?: Omit<RenderOptions, "queries">, routerOptions: RouterOptions<S> = {route: "/"}): RenderWithRouterResult<typeof queries,S>
export function renderWithRouter<Q extends Queries, S>(ui: React.ReactElement, options: RenderOptions<Q>, routerOptions: RouterOptions<S> = {route: "/"}): RenderWithRouterResult<Q,S> {
const routerHistory = routerOptions.history || createMemoryHistory({ initialEntries: [routerOptions.route] })
const routerElement: React.ComponentType = ({ children }) => (
<Router history={routerHistory}>{children}</Router>
)
return {
...render(ui, { wrapper: routerElement }),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
history: routerHistory,
}
}
ve hem overload imzası hem de dönüş türü için vscode'nun tamamen görüntüleyemeyeceği kadar uzun bazı çılgın tip hataları.
Yukarıdaki türleri ve aşırı yüklemeleri düzeltmeme biri yardımcı olabilir mi, lütfen?