Skip to main content

testing-library-froyojs

testing-library-froyojs is a package that extends @testing-library/dom to work with Froyo.

Installation​

npm i testing-library-froyojs --save-dev

API​

Froyo Testing Library re-exports everything from DOM Testing Library as well as these methods:

render​

Render markup and initialize components.

Type​

function render<T extends ComponentInstance>(
    html: string,
    initialize?: (() => T | T[]) | null,
    options?: RenderOptions
): RenderResult;

Details​

This method injects a raw html string into a DOM element and then calls initialize to instantiate components.

The initialize method must return a single component instance or an array of component instances.

An optional set of configuration options can be provided as the third argument.

Example​

import '@testing-library/jest-dom';
import { defineComponent } from 'froyojs';
import { render } from 'testing-library-froyojs';

const HelloWorld = defineComponent({
    state: {
        message: {
            default: 'Hello, World!',
        },
    },
    render: {
        $root() {
            return this.$state.message;
        },
    },
});

test('renders a greeting', () => {
    const { getByText } = render(
        '<div id="root"></div>',
        () => new HelloWorld('#root')
    );

    expect(getByText('Hello, world!')).toBeInTheDocument();
});

cleanup​

Remove active processes created by render.

Type​

function cleanup(): void;

Details​

This method destroys all active component instances and removes all DOM elements generated by render.

This method should be called after every test in order to avoid potential memory leaks and to ensure a sterile testing environment.

Testing frameworks that support the afterEach or teardown globals (e.g. mocha, Jest, and Jasmine) automatically call this method after every test.

Example​

import { cleanup } from 'testing-library-froyojs';

cleanup();

Render Options​

The render method takes the following options:

container​

Optionally declare a custom element to render within.

Type​

interface RenderOptions {
    container?: Element | DocumentFragment;
}

Details​

By default, a div is generated and appended to the base element.

provided, the element will not be appended to document.body automatically.

Example​

const container = document.createElement('div');

const result = render('<div id="root"></div>', () => new HelloWorld('#root'), {
    container: document.body.appendChild(container),
});

baseElement​

Optionally declare the target element for the container and all queries.

Type​

interface RenderOptions {
    baseElement?: Element | DocumentFragment;
}

Details​

If the container is specified, then this defaults to that, otherwise this defaults to document.body.

This element is used as the target element for all of the query methods.

If provided, the element will not be appended to document.body automatically.

Example​

const baseElement = document.createElement('div');

const result = render('<div id="root"></div>', () => new HelloWorld('#root'), {
    baseElement: document.body.appendChild(baseElement),
});

queries​

Declare a custom set of query methods.

Type​

interface RenderOptions {
    queries?: Queries;
}

Details​

Customize the set of query methods to be bound to the baseElement and returned in the result.

This option overrides the default set of queries from DOM Testing Library unless merged.

Learn more about creating custom queries on the Testing Library website.

Example​

import * as myQueries from 'my-query-library';
import { queries } from 'testing-library-froyojs';

const { getByMyQuery } = render(
    '<div id="root"></div>',
    () => new HelloWorld('#root'),
    queries: { ...queries, ...myQueries },
);

Render Result​

The render method returns an object with the following properties:

...queries​

The query functions bound to the baseElement.

Type​

interface RenderResult {
    ...queries: Queries
};

Details​

By default, the queries from DOM Testing Library are automatically returned and are bound to the baseElement.

This list can be customized via the queries option.

Example​

const { getByText, queryByLabelText } = render(
    '<div id="root"></div>',
    () => new HelloWorld('#root')
);

container​

The containing DOM node for the rendered html.

Type​

interface RenderResult {
    container: Element;
}

baseElement​

The element where the container was appended and queries are bound.

Type​

interface RenderResult {
    baseElement: Element;
}

rerender​

Update the state of a single component instance.

Type​

function rerender(
    root: Element | string,
    stateChanges?: Record<string, any>
) => void

Details​

The first argument must be an element (or query string) that matches the root element of the desired component instance.

If a corresponding instance is identified, its state is then updated with the data passed to the second argument.

If no instance is found for the given root, a warning will be thrown.

Example​

import { render } from 'testing-library-froyo';

const { rerender } = render(
    '<div id="root"></div>',
    () => new HelloWorld('#root')
);

// updates the instance and renders a different message
rerender('#root', { message: 'Goodbye, World!' });

destroy​

Remove all component instances and generated elements.

Type​

function destroy(): void;

Details​

Destroys all component instances returned by the initialize method.

Removes all generated elements from the DOM, namely the container. Custom elements are not removed.

import { render } from '@testing-library/react';

const { destroy } = render(
    '<div id="root"></div>',
    () => new HelloWorld('#root')
);

destroy();