Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 8x 1x 1x 9x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 1x 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 1x 1x | import React from "react";
import { PropsWithChildren, StrictMode } from "react";
import { render, renderHook, RenderHookOptions } from "@testing-library/react";
const DefaultWrapper = ({ children }: PropsWithChildren) => <>{children}</>;
/**
* Composes two React wrapper components.
* OuterWrapper wraps InnerWrapper which wraps children.
*/
function composeWrappers(
OuterWrapper: React.ComponentType<{ children: React.ReactNode }>,
InnerWrapper?: React.ComponentType<{ children: React.ReactNode }>
): React.ComponentType<{ children: React.ReactNode }> {
if (!InnerWrapper) {
return OuterWrapper;
}
return function ComposedWrapper({ children }: { children: React.ReactNode }) {
return (
<OuterWrapper>
<InnerWrapper>{children}</InnerWrapper>
</OuterWrapper>
);
};
}
const StrictModeWrapper = ({ children }: PropsWithChildren) => (
<StrictMode>{children}</StrictMode>
);
export const wrappers: {
mode: "normal" | "strict";
Wrapper: React.FC<{ children: React.ReactNode }>;
render: (ui: React.ReactElement) => ReturnType<typeof render>;
renderHook: <TResult, TProps>(
render: (props: TProps) => TResult,
options?: RenderHookOptions<TProps>
) => ReturnType<typeof renderHook<TResult, TProps>>;
}[] = [
{
mode: "normal" as const,
Wrapper: DefaultWrapper,
render: (ui: React.ReactElement) => {
return render(ui, { wrapper: DefaultWrapper });
},
renderHook: <TResult, TProps>(
callback: (props: TProps) => TResult,
options?: RenderHookOptions<TProps>
) => {
return renderHook(callback, options);
},
},
{
mode: "strict" as const,
Wrapper: StrictModeWrapper,
render: (ui: React.ReactElement) => {
return render(ui, { wrapper: StrictModeWrapper });
},
renderHook: <TResult, TProps>(
callback: (props: TProps) => TResult,
options?: RenderHookOptions<TProps>
) => {
const composedWrapper = composeWrappers(
StrictModeWrapper,
options?.wrapper
);
return renderHook(callback, { ...options, wrapper: composedWrapper });
},
},
];
|