Riot-enzyme

Riot-enzyme is a powerful testing utility to test tags of Riot.

Shallow-rendering is provided by Riot-shallowize including the limitation about transclusions.

It is under development, and now virtually following Riot-test-util, that is strongly recommended.

Features

• Shallow rendering
• Finding with CSS selectors
• Snapshot testing

It is a thin wrapper of Enzyme. Please note shallow-rendering needs DOM.

Installation

npm install --save-dev riot-enzyme

Usage

Load as:

// es5
var shallow = require('react').shallow;

// es6
import { shallow } from 'riot-enzyme';

Shallow rendering as:

var tag = '<tag><p>{opts.data}</p></tag>';

var wrapper = shallow(tag, { data: 'Hello, world!'});

Test with jest for example:

// Opts are passed
expect(wrapper.opts()).toEqual({data: 'Hello, world!'});

// Only one <p> inside <tag>, which contains the text.
expect(wrapper.find('p').text()).toBe('Hello, world!');

And test snapshot:

expect(wrapper.toJson())).toMatchSnapshot();

WARNING: Currently, toJson() emits all the attributes as-is, including members of opts and data-is.

Specify a name for multiple tags as:

var tags = `
<inner>
  <p>{opts.data}</p>
</inner>
<outer>
  <inner data={opts.innerData} />
</outer>
`;

var wrapper = shallow(tags, 'outer', { innerData: 'Hello, world'});

shallow() constructs shallow tree "<outer><inner data="Hello, world"></inner></outer>" rather than "<outer><inner><p>Hello, world</p></inner></outer>", keeping your tags highly independent and requiring single root tag definition in most cases.