readme.md

reBEM addons for React Test Utilities.

Install

npm i -D rebem-test-utils

Overview

In addition to usual React Test Utilities methods there are few new which lets you search for components by BEM PropTypes:

{
    block
    elem
    mods
    mix
}

This object may be called bemjson.

API

isCompositeComponentWithBEM(instance, bemjson)

In addition to isCompositeComponentWithType().

import { BEM } from 'rebem';
import TestUtils from 'rebem-test-utils';

const tree = TestUtils.renderIntoDocument(
    BEM({ block: 'block' },
        BEM({ block: 'block', elem: 'elem' })
    )
);

const elem = TestUtils.findRenderedDOMComponentWithClass(tree, 'block__elem');

console.log(
    TestUtils.isCompositeComponentWithBEM(elem, { block: 'block', elem: 'elem' })
);
// true

scryRenderedDOMComponentsWithBEM(tree, bemjson)

In addition to scryRenderedDOMComponentsWithClass().

import { BEM } from 'rebem';
import TestUtils from 'rebem-test-utils';

const tree = TestUtils.renderIntoDocument(
    BEM({ block: 'block' },
        BEM({ block: 'block', elem: 'elem' }),
        BEM({ block: 'block', elem: 'elem' })
    )
);

const elems = TestUtils.scryRenderedDOMComponentsWithBEM(tree, { block: 'block', elem: 'elem' });

console.log(elems.length);
// 2

console.log(
    elems.every(elem => TestUtils.isDOMComponent(elem))
);
// true

findRenderedDOMComponentWithBEM(tree, bemjson)

In addition to findRenderedDOMComponentWithClass().

import { BEM } from 'rebem';
import TestUtils from 'rebem-test-utils';

const tree = TestUtils.renderIntoDocument(
    BEM({ block: 'block' },
        BEM({ block: 'block', elem: 'elem' })
    )
);

const elem = TestUtils.findRenderedDOMComponentWithBEM(tree, { block: 'block', elem: 'elem' });

console.log(
    TestUtils.isDOMComponent(elem)
);
// true