Notable Pottery Manufacturer

    enzyme-context-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Enzyme Context Utils

    The module exports some utilities that improve the ease of authoring enzyme-context plugins:

    ContextWatcher()

    A class that gets the context of a Provider and notifies listeners when the context changes.

    Arguments

    1. render ((WatcherComponent: React.ComponentClass) => React.ReactElement): a function that accepts a react component as its only argument and must return some JSX that renders that react component as a child of a Provider.
    2. childContextTypes (ValidationMap ([optional])): the childContextTypes of the provider. This argument only needs to be passed if the root component returned by render does not define childContextTypes.

    Attributes

    • value (any): the context of the provider

    Methods

    • listen(listener: (context: any) => void): registers a listener to be notified of context changes

      • Arguments
        1. listener: ((context: any) => void): the listener function that will be called with the context whenever it changes
    • stop(): stops listening for changes and cleans up any mounted components

    Example

    import { createStore } from 'redux';
    import { Provider } from 'react-redux';
    import { getContextFromProvider } from 'enzyme-context-utils';
     
    const store = createStore(() => ({}));
    const context = new ContextWatcher(Watcher => (
      <Provider store={store}>
        <Watcher />
      </Provider>
    ));
     
    expect(context.value).toEqual({ store });
    context.listen(newContext => {
      // called whenever context changes
    });

    bindContextToWrapper(context: ContextWatcher) => (wrapper: ReactWrapper | ShallowWrapper) => () => void;

    A utility that binds a ContextWatcher to a given enzyme wrapper, updating its context whenever the watcher's context changes.

    Arguments

    1. context (ContextWatcher): the context to watch

    Returns

    • (wrapper: ReactWrapper | ShallowWrapper) => () => void: a function that accepts the enzyme wrapper to bind to
      • Arguments
        1. wrapper (ReactWrapper | ShallowWrapper): the enzyme wrapper to bind to
      • Returns: () => void: a function that will stop listening for context changes when called

    Example

    This method is useful for setting the updater attributes of an enzyme-context plugin return:

    const myPlugin = (node, options) => {
      const store = createStore(() => ({}));
      const context = new ContextWatcher(Watcher => (
        <Provider store={store}>
          <Watcher />
        </Provider>
      ));
     
      return {
        node,
        options,
        controller: store,
        updater: bindContextToWrapper(context),
      };
    };

    EnzymePlugin<O extends object, C>

    A TypeScript interface defining an enzyme-context plugin.

    Arguments

    1. O (extends object): the shape of the custom parameters users may pass to mount/shallow when this plugin is enabled.
    2. C: the type of the controller that will be returned.

    Example

    import { EnzymePlugin } from 'enzyme-context-utils';
    import { createStore, Store, AnyAction } from 'redux';
     
    interface ReduxPluginMountOptions {
      initialActions?: AnyAction[];
    }
     
    const reduxPlugin: EnzymePlugin<ReduxPluginMountOptions, Store> = (node, options) => {
      const store = createStore(() => ({}));
     
      return {
        node,
        options: {
          ...options,
          context: {
            ...options.context,
            store,
          },
        },
        controller: store,
      };
    };

    Keywords

    none

    Install

    npm i enzyme-context-utils

    DownloadsWeekly Downloads

    459

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    24.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • jkillian
    • minznerjosh