= (intercepter: T) => void;
export interface CommonWrapper> {
/**
* Returns a new wrapper with only the nodes of the current wrapper that, when passed into the provided predicate function, return true.
*/
filterWhere(predicate: (wrapper: this) => boolean): this;
/**
* Returns whether or not the current wrapper has a node anywhere in it's render tree that looks like the one passed in.
*/
contains(node: ReactElement | ReactElement[] | string | number): boolean;
/**
* Returns whether or not a given react element exists in the shallow render tree.
*/
containsMatchingElement(node: ReactElement | ReactElement[]): boolean;
/**
* Returns whether or not all the given react elements exists in the shallow render tree
*/
containsAllMatchingElements(nodes: ReactElement[] | ReactElement[][]): boolean;
/**
* Returns whether or not one of the given react elements exists in the shallow render tree.
*/
containsAnyMatchingElements(nodes: ReactElement[] | ReactElement[][]): boolean;
/**
* Returns whether or not the current render tree is equal to the given node, based on the expected value.
*/
equals(node: ReactElement): boolean;
/**
* Returns whether or not a given react element matches the shallow render tree.
*/
matchesElement(node: ReactElement): boolean;
/**
* Returns whether or not the current node has a className prop including the passed in class name.
*/
hasClass(className: string | RegExp): boolean;
/**
* Invokes a function prop.
* @param invokePropName The function prop to call.
* @param ...args The arguments to the invokePropName function
* @returns The value of the function.
*/
invoke<
K extends NonNullable<
{
[K in keyof P]-?: P[K] extends ((...arg: any[]) => void) | undefined ? K : never;
}[keyof P]
>,
>(
invokePropName: K,
): P[K];
/**
* Returns whether or not the current node matches a provided selector.
*/
is(selector: EnzymeSelector): boolean;
/**
* Returns whether or not the current node is empty.
* @deprecated Use .exists() instead.
*/
isEmpty(): boolean;
/**
* Returns whether or not the current node exists.
*/
exists(selector?: EnzymeSelector): boolean;
/**
* Returns a new wrapper with only the nodes of the current wrapper that don't match the provided selector.
* This method is effectively the negation or inverse of filter.
*/
not(selector: EnzymeSelector): this;
/**
* Returns a string of the rendered text of the current render tree. This function should be looked at with
* skepticism if being used to test what the actual HTML output of the component will be. If that is what you
* would like to test, use enzyme's render function instead.
*
* Note: can only be called on a wrapper of a single node.
*/
text(): string;
/**
* Returns a string of the rendered HTML markup of the current render tree.
*
* Note: can only be called on a wrapper of a single node.
*/
html(): string;
/**
* Returns the node at a given index of the current wrapper.
*/
get(index: number): ReactElement;
/**
* Returns the wrapper's underlying node.
*/
getNode(): ReactElement;
/**
* Returns the wrapper's underlying nodes.
*/
getNodes(): ReactElement[];
/**
* Returns the wrapper's underlying node.
*/
getElement(): ReactElement;
/**
* Returns the wrapper's underlying node.
*/
getElements(): ReactElement[];
/**
* Returns the outer most DOMComponent of the current wrapper.
*/
getDOMNode(): T;
/**
* Returns a wrapper around the node at a given index of the current wrapper.
*/
at(index: number): this;
/**
* Reduce the set of matched nodes to the first in the set.
*/
first(): this;
/**
* Reduce the set of matched nodes to the last in the set.
*/
last(): this;
/**
* Returns a new wrapper with a subset of the nodes of the original wrapper, according to the rules of `Array#slice`.
*/
slice(begin?: number, end?: number): this;
/**
* Taps into the wrapper method chain. Helpful for debugging.
*/
tap(intercepter: Intercepter): this;
/**
* Returns the state hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.
*/
state(): S;
state(key: K): S[K];
state(key: string): T;
/**
* Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.
*/
context(): any;
context(key: string): T;
/**
* Returns the props hash for the current node of the wrapper.
*
* NOTE: can only be called on a wrapper of a single node.
*/
props(): P;
/**
* Returns the prop value for the node of the current wrapper with the provided key.
*
* NOTE: can only be called on a wrapper of a single node.
*/
prop(key: K): P[K];
prop(key: string): T;
/**
* Returns the key value for the node of the current wrapper.
* NOTE: can only be called on a wrapper of a single node.
*/
key(): string;
/**
* Simulate events.
* Returns itself.
* @param args?
*/
simulate(event: string, ...args: any[]): this;
/**
* Used to simulate throwing a rendering error. Pass an error to throw.
* Returns itself.
* @param error
*/
simulateError(error: any): this;
/**
* A method to invoke setState() on the root component instance similar to how you might in the definition of
* the component, and re-renders. This method is useful for testing your component in hard to achieve states,
* however should be used sparingly. If possible, you should utilize your component's external API in order to
* get it into whatever state you want to test, in order to be as accurate of a test as possible. This is not
* always practical, however.
* Returns itself.
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
setState(state: Pick, callback?: () => void): this;
/**
* A method that sets the props of the root component, and re-renders. Useful for when you are wanting to test
* how the component behaves over time with changing props. Calling this, for instance, will call the
* componentWillReceiveProps lifecycle method.
*
* Similar to setState, this method accepts a props object and will merge it in with the already existing props.
* Returns itself.
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
setProps(props: Pick, callback?: () => void): this;
/**
* A method that sets the context of the root component, and re-renders. Useful for when you are wanting to
* test how the component behaves over time with changing contexts.
* Returns itself.
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
setContext(context: any): this;
/**
* Gets the instance of the component being rendered as the root node passed into shallow().
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
instance(): C;
/**
* Forces a re-render. Useful to run before checking the render output if something external may be updating
* the state of the component somewhere.
* Returns itself.
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
update(): this;
/**
* Returns an html-like string of the wrapper for debugging purposes. Useful to print out to the console when
* tests are not passing when you expect them to.
*/
debug(options?: {
/** Whether props should be omitted in the resulting string. Props are included by default. */
ignoreProps?: boolean | undefined;
/** Whether arrays and objects passed as props should be verbosely printed. */
verbose?: boolean | undefined;
}): string;
/**
* Returns the name of the current node of the wrapper.
*/
name(): string;
/**
* Iterates through each node of the current wrapper and executes the provided function with a wrapper around
* the corresponding node passed in as the first argument.
*
* Returns itself.
* @param fn A callback to be run for every node in the collection. Should expect a ShallowWrapper as the first
* argument, and will be run with a context of the original instance.
*/
forEach(fn: (wrapper: this, index: number) => any): this;
/**
* Maps the current array of nodes to another array. Each node is passed in as a ShallowWrapper to the map
* function.
* Returns an array of the returned values from the mapping function..
* @param fn A mapping function to be run for every node in the collection, the results of which will be mapped
* to the returned array. Should expect a ShallowWrapper as the first argument, and will be run
* with a context of the original instance.
*/
map(fn: (wrapper: this, index: number) => V): V[];
/**
* Applies the provided reducing function to every node in the wrapper to reduce to a single value. Each node
* is passed in as a ShallowWrapper, and is processed from left to right.
*/
reduce(fn: (prevVal: R, wrapper: this, index: number) => R, initialValue?: R): R;
/**
* Applies the provided reducing function to every node in the wrapper to reduce to a single value.
* Each node is passed in as a ShallowWrapper, and is processed from right to left.
*/
reduceRight(fn: (prevVal: R, wrapper: this, index: number) => R, initialValue?: R): R;
/**
* Returns whether or not any of the nodes in the wrapper match the provided selector.
*/
some(selector: EnzymeSelector): boolean;
/**
* Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
*/
someWhere(fn: (wrapper: this) => boolean): boolean;
/**
* Returns whether or not all of the nodes in the wrapper match the provided selector.
*/
every(selector: EnzymeSelector): boolean;
/**
* Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
*/
everyWhere(fn: (wrapper: this) => boolean): boolean;
/**
* Returns true if renderer returned null
*/
isEmptyRender(): boolean;
/**
* Renders the component to static markup and returns a Cheerio wrapper around the result.
*/
render(): cheerio.Cheerio;
/**
* Returns the type of the current node of this wrapper. If it's a composite component, this will be the
* component constructor. If it's native DOM node, it will be a string of the tag name.
*
* Note: can only be called on a wrapper of a single node.
*/
type(): string | ComponentClass | FunctionComponent
;
length: number;
}
export type Parameters = T extends (...args: infer A) => any ? A : never;
export interface ShallowWrapper extends CommonWrapper
{}
export class ShallowWrapper
{
constructor(nodes: JSX.Element[] | JSX.Element, root?: ShallowWrapper, options?: ShallowRendererProps);
shallow(options?: ShallowRendererProps): ShallowWrapper;
unmount(): this;
/**
* Find every node in the render tree that matches the provided selector.
* @param selector The selector to match.
*/
find(statelessComponent: FunctionComponent): ShallowWrapper;
find(component: ComponentType): ShallowWrapper;
find(
componentClass: ComponentClass,
): ShallowWrapper;
find(props: EnzymePropSelector): ShallowWrapper;
find(selector: string): ShallowWrapper;
/**
* Removes nodes in the current wrapper that do not match the provided selector.
* @param selector The selector to match.
*/
filter(statelessComponent: FunctionComponent): ShallowWrapper;
filter(component: ComponentType): ShallowWrapper;
filter(props: EnzymePropSelector | string): ShallowWrapper;
/**
* Finds every node in the render tree that returns true for the provided predicate function.
*/
findWhere(predicate: (wrapper: ShallowWrapper) => boolean): ShallowWrapper;
/**
* Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector
* can be provided and it will filter the children by this selector.
*/
children(statelessComponent: FunctionComponent): ShallowWrapper;
children(component: ComponentType): ShallowWrapper;
children(selector: string): ShallowWrapper;
children(props?: EnzymePropSelector): ShallowWrapper;
/**
* Returns a new wrapper with child at the specified index.
*/
childAt(index: number): ShallowWrapper;
childAt(index: number): ShallowWrapper;
/**
* Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.
* NOTE: can only be called on wrapper of a single non-DOM component element node.
*/
dive(
options?: ShallowRendererProps,
): ShallowWrapper;
dive(options?: ShallowRendererProps): ShallowWrapper;
dive(options?: ShallowRendererProps): ShallowWrapper;
/**
* Strips out all the not host-nodes from the list of nodes
*
* This method is useful if you want to check for the presence of host nodes
* (actually rendered HTML elements) ignoring the React nodes.
*/
hostNodes(): ShallowWrapper;
/**
* Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the
* current wrapper. Optionally, a selector can be provided and it will filter the parents by this selector.
*
* Note: can only be called on a wrapper of a single node.
*/
parents(statelessComponent: FunctionComponent): ShallowWrapper;
parents(component: ComponentType): ShallowWrapper;
parents(selector: string): ShallowWrapper;
parents(props?: EnzymePropSelector): ShallowWrapper;
/**
* Returns a wrapper of the first element that matches the selector by traversing up through the current node's
* ancestors in the tree, starting with itself.
*
* Note: can only be called on a wrapper of a single node.
*/
closest(statelessComponent: FunctionComponent): ShallowWrapper;
closest(component: ComponentType): ShallowWrapper;
closest(props: EnzymePropSelector): ShallowWrapper;
closest(selector: string): ShallowWrapper;
/**
* Returns a wrapper with the direct parent of the node in the current wrapper.
*/
parent(): ShallowWrapper;
/**
* Returns a wrapper of the node rendered by the provided render prop.
*/
renderProp(
prop: PropName,
): (...params: Parameters) => ShallowWrapper;
/**
* If a wrappingComponent was passed in options,
* this methods returns a ShallowWrapper around the rendered wrappingComponent.
* This ShallowWrapper can be used to update the wrappingComponent's props and state
*/
getWrappingComponent: () => ShallowWrapper;
}
export interface ReactWrapper extends CommonWrapper
{}
export class ReactWrapper
{
constructor(nodes: JSX.Element | JSX.Element[], root?: ReactWrapper, options?: MountRendererProps);
unmount(): this;
mount(): this;
/**
* Returns a wrapper of the node that matches the provided reference name.
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
ref(refName: string): ReactWrapper;
ref(refName: string): ReactWrapper;
/**
* Detaches the react tree from the DOM. Runs ReactDOM.unmountComponentAtNode() under the hood.
*
* This method will most commonly be used as a "cleanup" method if you decide to use the attachTo option in mount(node, options).
*
* The method is intentionally not "fluent" (in that it doesn't return this) because you should not be doing anything with this wrapper after this method is called.
*
* Using the attachTo is not generally recommended unless it is absolutely necessary to test something.
* It is your responsibility to clean up after yourself at the end of the test if you do decide to use it, though.
*/
detach(): void;
/**
* Strips out all the not host-nodes from the list of nodes
*
* This method is useful if you want to check for the presence of host nodes
* (actually rendered HTML elements) ignoring the React nodes.
*/
hostNodes(): ReactWrapper;
/**
* Find every node in the render tree that matches the provided selector.
* @param selector The selector to match.
*/
find(statelessComponent: FunctionComponent): ReactWrapper;
find(component: ComponentType): ReactWrapper;
find(componentClass: ComponentClass): ReactWrapper;
find(props: EnzymePropSelector): ReactWrapper;
find(selector: string): ReactWrapper;
/**
* Finds every node in the render tree that returns true for the provided predicate function.
*/
findWhere(predicate: (wrapper: ReactWrapper) => boolean): ReactWrapper;
/**
* Removes nodes in the current wrapper that do not match the provided selector.
* @param selector The selector to match.
*/
filter(statelessComponent: FunctionComponent): ReactWrapper;
filter(component: ComponentType): ReactWrapper;
filter(props: EnzymePropSelector | string): ReactWrapper;
/**
* Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector
* can be provided and it will filter the children by this selector.
*/
children(statelessComponent: FunctionComponent): ReactWrapper;
children(component: ComponentType): ReactWrapper;
children(selector: string): ReactWrapper;
children(props?: EnzymePropSelector): ReactWrapper;
/**
* Returns a new wrapper with child at the specified index.
*/
childAt(index: number): ReactWrapper;
childAt(index: number): ReactWrapper;
/**
* Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the
* current wrapper. Optionally, a selector can be provided and it will filter the parents by this selector.
*
* Note: can only be called on a wrapper of a single node.
*/
parents(statelessComponent: FunctionComponent): ReactWrapper;
parents(component: ComponentType): ReactWrapper;
parents(selector: string): ReactWrapper;
parents(props?: EnzymePropSelector): ReactWrapper;
/**
* Returns a wrapper of the first element that matches the selector by traversing up through the current node's
* ancestors in the tree, starting with itself.
*
* Note: can only be called on a wrapper of a single node.
*/
closest(statelessComponent: FunctionComponent): ReactWrapper;
closest(component: ComponentType): ReactWrapper;
closest(props: EnzymePropSelector): ReactWrapper;
closest(selector: string): ReactWrapper;
/**
* Returns a wrapper with the direct parent of the node in the current wrapper.
*/
parent(): ReactWrapper;
/**
* Returns a wrapper of the node rendered by the provided render prop.
*/
renderProp(
prop: PropName,
): (...params: Parameters) => ReactWrapper;
/**
* If a wrappingComponent was passed in options,
* this methods returns a ReactWrapper around the rendered wrappingComponent.
* This ReactWrapper can be used to update the wrappingComponent's props and state
*/
getWrappingComponent: () => ReactWrapper;
}
export interface Lifecycles {
componentDidUpdate?: {
onSetState: boolean;
prevContext: boolean;
} | undefined;
getDerivedStateFromProps?: { hasShouldComponentUpdateBug: boolean } | boolean | undefined;
getChildContext?: {
calledByRenderer: boolean;
[key: string]: any;
} | undefined;
setState?: any;
// TODO Maybe some life cycle are missing
[lifecycleName: string]: any;
}
export interface ShallowRendererProps {
// See https://github.com/airbnb/enzyme/blob/enzyme@3.10.0/docs/api/shallow.md#arguments
/**
* If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after
* setProps and setContext. Default to false.
*/
disableLifecycleMethods?: boolean | undefined;
/**
* Enable experimental support for full react lifecycle methods
*/
lifecycleExperimental?: boolean | undefined;
/**
* Context to be passed into the component
*/
context?: any;
/**
* The legacy enableComponentDidUpdateOnSetState option should be matched by
* `lifecycles: { componentDidUpdate: { onSetState: true } }`, for compatibility
*/
enableComponentDidUpdateOnSetState?: boolean | undefined;
/**
* the legacy supportPrevContextArgumentOfComponentDidUpdate option should be matched by
* `lifecycles: { componentDidUpdate: { prevContext: true } }`, for compatibility
*/
supportPrevContextArgumentOfComponentDidUpdate?: boolean | undefined;
lifecycles?: Lifecycles | undefined;
/**
* A component that will render as a parent of the node.
* It can be used to provide context to the `node`, among other things.
* See the [getWrappingComponent() docs](https://airbnb.io/enzyme/docs/api/ShallowWrapper/getWrappingComponent.html) for an example.
* **Note**: `wrappingComponent` must render its children.
*/
wrappingComponent?: ComponentType | undefined;
/**
* Initial props to pass to the `wrappingComponent` if it is specified.
*/
wrappingComponentProps?: {} | undefined;
/**
* If set to true, when rendering Suspense enzyme will replace all the lazy components in children
* with fallback element prop. Otherwise it won't handle fallback of lazy component.
* Default to true. Note: not supported in React < 16.6.
*/
suspenseFallback?: boolean | undefined;
adapter?: EnzymeAdapter | undefined;
/* TODO what are these doing??? */
attachTo?: any;
hydrateIn?: any;
PROVIDER_VALUES?: any;
}
export interface MountRendererProps {
/**
* Context to be passed into the component
*/
context?: {} | undefined;
/**
* DOM Element to attach the component to
*/
attachTo?: HTMLElement | null | undefined;
/**
* Merged contextTypes for all children of the wrapper
*/
childContextTypes?: {} | undefined;
/**
* A component that will render as a parent of the node.
* It can be used to provide context to the `node`, among other things.
* See the [getWrappingComponent() docs](https://airbnb.io/enzyme/docs/api/ShallowWrapper/getWrappingComponent.html) for an example.
* **Note**: `wrappingComponent` must render its children.
*/
wrappingComponent?: ComponentType | undefined;
/**
* Initial props to pass to the `wrappingComponent` if it is specified.
*/
wrappingComponentProps?: {} | undefined;
}
/**
* Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that
* your tests aren't indirectly asserting on behavior of child components.
*/
export function shallow(
node: ReactElement,
options?: ShallowRendererProps,
): ShallowWrapper
;
export function shallow
(node: ReactElement
, options?: ShallowRendererProps): ShallowWrapper
;
export function shallow
(node: ReactElement
, options?: ShallowRendererProps): ShallowWrapper
;
/**
* Mounts and renders a react component into the document and provides a testing wrapper around it.
*/
export function mount(
node: ReactElement,
options?: MountRendererProps,
): ReactWrapper
;
export function mount
(node: ReactElement
, options?: MountRendererProps): ReactWrapper
;
export function mount
(node: ReactElement
, options?: MountRendererProps): ReactWrapper
;
/**
* Render react components to static HTML and analyze the resulting HTML structure.
*/
export function render
(node: ReactElement
, options?: any): cheerio.Cheerio;
// See https://github.com/airbnb/enzyme/blob/v3.10.0/packages/enzyme/src/EnzymeAdapter.js
export class EnzymeAdapter {
wrapWithWrappingComponent?: ((node: ReactElement, options?: ShallowRendererProps) => any) | undefined;
}
/**
* Configure enzyme to use the correct adapter for the react version
* This is enabling the Enzyme configuration with adapters in TS
*/
export function configure(options: {
adapter: EnzymeAdapter;
// See https://github.com/airbnb/enzyme/blob/enzyme@3.10.0/docs/guides/migration-from-2-to-3.md#lifecycle-methods
// Actually, `{adapter:} & Pick` is more precise. However,
// in that case jsdoc won't be shown
/**
* If set to true, componentDidMount is not called on the component, and componentDidUpdate is not called after
* setProps and setContext. Default to false.
*/
disableLifecycleMethods?: boolean | undefined;
}): void;