riot-jest-transformer

riot-jest-transformer

A Jest transformer for riot tags

This transformer helps you to use Jest testing tool for your Riot tags. With this transformer you can import your tags into your Jest tests.

Prerequisites

• Nodejs >= 6.9
• Installed Jest package (npm i --save-dev jest babel-jest)
• Installed riot-jest-transformer npm package into your project: npm i --save-dev riot-jest-transformer
• If you use Babel, set up .babelrc file correctly (for more see Jest docs). Don't forget setting presets for new javascript features.

Setting up Jest config file

riot-jest-transformer must be used in your Jest config file like this:

{
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tag$": "riot-jest-transformer"
    }
}

If you use Riot pre-processors, you can provide config options for riot-jest-transformer to register pre-processors befor compiling your tags for your tests. In this case you should use the following scheme:

{
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tag$": ["riot-jest-transformer", {
          registrations: [{
            type: "css" | "template" | "javascript",
            name: string,
            preprocessorModulePath: string
        }]
    }
}

preprocessorModulePath must be defined as a relative path (based on Jest rootDir configuration) to a module that exports your preprocessor function.

For example if you use scss, you can define a preprocessor function like this:

// riot-scss-preprocessor.js
const sass = require('node-sass');
 
module.exports = function riotScssPreprocessor(code, { options }) => {
    const { file } = options;
    console.log('Compile the sass code in', file);
    const { css } = sass.renderSync({
        data: code
    });
    return {
        code: css.toString(),
        map: null
    };
}

In the above case the jest config should be looked something like this:

// jest.config.js
 
module.exports = {
    transform: {
        "^.+\\.riot$": ["riot-jest-transformer", {
            registrations: [{
                type: 'css',
                name: 'scss',
                preprocessorModulePath: 'riot-scss-preprocessor'
            }]
        }],
        "^.+\\.jsx?$": "babel-jest"
    },
};
 

Usage

Just import your tag into the Jest test file. After that you can mount your tag to an html element. For example:

import * as riot from 'riot';
import hello from '../hello.tag'; // <hello><h1>{ opts.name }</h1></hello>
 
describe('hello', () => {
    beforeAll( () => {
        // create mounting point
        const elem = document.createElement('hello');
 
        elem.setAttribute('name', 'world');
        document.body.appendChild(elem)
 
        riot.register('hello', hello);
        riot.mount(elem, 'hello');
    });
 
    it('should mount the tag', () => {
        expect(document.querySelector('hello h1').textContent).toBe('world');
    });
});

Demo

You can play with importing and testing tags in the demo folder:

• Clone project
• Enter demo folder
• Run npm i
• Run npm test to run a simple jest test for an example Riot tag.

Development

Run tests with npm test or npm run test:watch.

The transformer is developed with tdd, so if you would like to contribute (you are really welcomed :), please write your tests for your new functionality, and send pull request to integrate your changes.