/context-thief

⚛🦹‍♀️ Helper function to steal React context values for testing

Primary LanguageTypeScriptMIT LicenseMIT

Context Thief icon

Context Thief

Helper function to steal React context values for testing

npm version check status license: MIT

Description

Context Thief stores the current context value for the inputted context for use in tests.

If you test components with contexts and don't want to create a new function or component every time, this module is for you!

Installation

npm install --save-dev context-thief

Usage

createContextThief(context)

Returns: {ContextThief, contextValue} Object containing the component to render and the outputted value

Parameter Type Description
context Context Instance of React.Context to consume

Example

example-component.tsx

import React from "react";

export const ExampleContext = React.createContext(false);
export const ExampleComponent: React.FC<{children: React.ReactNode}> = ({children}) => {
    return (
        <TestContext.Provider value={true}>
            {children}
        </TestContext.Provider>
    );
};

example-component.test.tsx

import React from "react";
import {render} from "@testing-library/react";
import {createContextThief} from "context-thief";
import {ExampleContext, ExampleComponent} from "./example-component";

it("should have the default current context value", () => {
    const {ContextThief, contextValue} = createContextThief(ExampleContext);

    render(
        <ExampleComponent>
            <ContextThief />
        </ExampleComponent>
    );

    expect(contextValue.current).toBe(true);
});

License

Copyright Evelyn Hathaway, MIT License

Icon Glyph

Icon glyph made by Gregor Cresnar