WithContext.md

@WithContext

Provides context for component in @ComponentProvider.

Will be merged (override values) with @DefaultContext, if available.

Test annotated with @WithContext will start to receive the value passed to the decorator as a context field in props object:

@Describe()
class MySpec {
  
  @Test()
  @WithContext(MyContext, { foo: "foo" })
  myTest(component, { props, context }) {
    // context.foo is available here
  }
}

WARN: prop-types lib needs to be installed, if you want to use enzyme lib.

Arguments

contextType (React.Context<any>): Type of the context.

contextValue (Object)?: Value passed to the context. Optional, if u have @DefaultContext.

lib ("react-dom" | "enzyne")?: Optional, react-dom by default. Type of the lib used to render component. For @testing-library/react - use react-dom.

Examples

Usage with @testing-library/react:

From:

import { render } from "@testing-library/react";
import MyContext from "../MyContext";
import { MyComponent } from "../MyComponent";

describe("MyComponentSpec", () => {
    
    const renderWithDefaultContext = (context, props = {}) => render(
        <MyContext.Provider {...context}>
          <MyContext.Consumer>
            {value => <MyComponent {...props} />}
          </MyContext.Consumer>
        </MyContext.Provider>
    );
    
    test("MyComponent calls onRender once during render", () => {
        const context = { onRender: jest.fn() };
        renderWithDefaultContext(context);
        expect(context.onRender).toHaveBeenCalledTimes(1);
    });
});

To:

import { render } from "@testing-library/react";
import MyContext from "../MyContext";

@Describe()
@RunWith(ReactTestRunner)
class MyComponentSpec {
    
    @ComponentProvider("../MyComponent")
    myComponent({ MyComponent }, props) {
        return render(<MyComponent {...props} />);
    }
    
    @Test("MyComponent calls onRender once during render")
    @WithContext(MyContext, { onRender: jest.fn() })
    behaviourTest({ getByText }, { context }) {
        expect(context.onRender).toHaveBeenCalledTimes(1);
    }
}

Usage with enzyme:

From:

import { shallow } from "enzyme";
import propTypes from "prop-types";
import { MyComponent } from "../MyComponent";

describe("MyComponentSpec", () => {
    
    const shallowWithDefaultContext = (context, props = {}) => {
        const component = <MyComponent {...props} />;
        component.type.contextTypes.first = propTypes.any;
        component.type.contextTypes.last = propTypes.any;
        component.type.contextTypes.onRender = propTypes.any;
        return shallow(component, {
            context
        });
    };
    
    test("MyComponent calls onRender once during render", () => {
        const context = { onRender: jest.fn() };
        renderWithDefaultContext(context);
        expect(context.onRender).toHaveBeenCalledTimes(1);
    })
});

To:

import { shallow } from "enzyme";
import MyContext from "../MyContext";

@Describe()
@RunWith(ReactTestRunner)
class MyComponentSpec {
    
    @ComponentProvider("../MyComponent")
    myComponent({ MyComponent }, props) {
        return shallow(<MyComponent {...props} />);
    }
    
    @Test("MyComponent calls onRender once during render")
    @WithContext(MyContext, { onRender: jest.fn() }, "enzyme")
    behaviourTest({ getByText }, { context }) {
       expect(context.onRender).toHaveBeenCalledTimes(1);
    }
}

Usage with @DefaultContext:

See @DefaultContext.