reactSuite Class

Defined in: ui/shared/test_helpers/reactSuite/index.js

Prepare a mocha test suite for testing a React component. Every test in the suite will have access to a mounted instance of the component type you're testing, which means you don't have to worry about creating, rendering, or detaching the component.

You may access the instance using the global "subject".

Also, your tests will have access to a bunch of DOM helpers for writing the test scenarios. See ./DOMHelpers.js for those helpers.

Public Functions

voidcreateSubject(Object|Function, Function)
BooleanisRunning()
React.ComponentgetSubject()
HTMLElementgetContainer()
voidremountSubject(Object)
voidremoveSubject()
voidattachToDOM(Function)
BooleanisAttachedToDOM()
voiddetachFromDOM()

Public Static Members

HTMLElementgetDOMContainer()

Constructor Documentation

reactSuite(suite: MochaSuite, type: React, initialProps: Object, options: Object) -> TestHelpers.ReactSuiteAPI

Parameters (7)

suite
MochaSuite

The test suite you're in. I.e, the function passed to describe().

type
React

The component type/factory/class something you want to test.

initialProps
Object

Optional. If you want the component to start out with certain props when it's auto-rendered by the reactSuite, this is the way to do it.

Probably useful for required props.

Defaults to: {}

options
Object

reactSuite options.

Defaults to: {}

options.autoMount
Boolean

Whether the subject should be automatically mounted and unmounted in beforeEach() and afterEach() blocks.

Pass this false if you want manual control of the subject.

Defaults to: true

options.immediatelyAttachToDOM
Boolean

When true, the subject's container node will be attached to the DOM before the subject gets mounted. This is necessary for components that use libraries/or rely on DOM operations when they mount.

Defaults to: false

options.requiresRouterContext
Boolean

Convenience option for calling "stubRoutes()" with an empty route-set. Use this if you need the component to be set up in a RR context but no route stubbing is necessary.

Defaults to: false

Return Value

TestHelpers.ReactSuiteAPI

Example

var reactSuite = require("test_helpers/reactSuite");

describe('MyComponent', function() {
  reactSuite(this, require("components/MyComponent"));

  it("should mount without errors", function() {
    // subject will now point to the mounted instance of MyComponent:
    expect(subject.isMounted()).to.equal(true);
  });
});

Static Method Documentation

Instance Method Documentation

    attachToDOM(callback: Function)

    Attach the component to the inspection DOM node which resides in the document DOM tree. This could be needed for things that rely on the visibility of the component.

    Parameters (2)

    callback
    		Function

    Callback to invoke when the subject is inserted into the DOM.

    callback.detachFromDOM
    		Function

    A callback that will detach the component from the DOM. Call this when you no longer need the component to be in the DOM.

    This is done automatically for you when the suite is torn down.

    Optionally, you can call TestHelpers.reactSuite#UI.detachFromDOM manually.

    createSubject(initialProps: Object|Function, done: Function)ASYNC

    Render and mount an instance of the test subject.

    Parameters (2)

    initialProps
    		Object|Function

    A set of props that the component should be mounted with. If this is a function, it must return an Object.

    done
    		Function

    A callback that will be invoked when the subject is fully mounted and ready to be operated on.

    Unknown tag:
{
  "type": "emit",
  "string": "",
  "typeInfo": {
    "name": null,
    "description": null,
    "isOptional": null,
    "defaultValue": null,
    "type": null
  },
  "line": 45
}

    detachFromDOM()

    Detach the component from the document DOM tree, rendering it invisible once again.

    getContainer() -> HTMLElement

    Return Value

    HTMLElement

    The DOM node the subject was mounted on.

    getSubject() -> React.Component

    Return Value

    React.Component

    The instance of the test subject. This is normally found in the global "subject" variable.

    isAttachedToDOM() -> Boolean

    Return Value

    Boolean

    Whether the component is currently visible in the document DOM tree.

    isRunning() -> Boolean

    Return Value

    Boolean

    Whether the subject is currently mounted and can be operated on.

    remountSubject(initialProps: Object)ASYNC

    Unmount and mount the subject again with new initial props.

    This will trigger the componentWillUnmount() hook!

    Parameters (1)

    initialProps
    		Object

    The new set of props to remount with.

    Unknown tag:
{
  "type": "emit",
  "string": "",
  "typeInfo": {
    "name": null,
    "description": null,
    "isOptional": null,
    "defaultValue": null,
    "type": null
  },
  "line": 108
}

    removeSubject()

    Remove the previously created instance in TestHelpers.reactSuite#UI.createSubject. This will also undo all side-effects to the React and Ember routes.

    Unknown tag:
{
  "type": "emit",
  "string": "",
  "typeInfo": {
    "name": null,
    "description": null,
    "isOptional": null,
    "defaultValue": null,
    "type": null
  },
  "line": 129
}

Made with ♥ using megadoc.