babel with coverage set up

.babelrc

{
  "sourceMaps": 'inline',
  "presets": [
    "@babel/preset-react"
  ]
}

index.js

import { template, defaultProps } from './utils.js'
import React from 'react'

export class FormattedMessage extends React.Component {
    constructor(){
        super()
    }
    render() {
        let { message, values, tagName: Element, ...rest } = this.props
        message = template(message, values, rest)
        return <Element>{ message }</Element>
    }
}

FormattedMessage.defaultProps = defaultProps

export class FormattedHTMLMessage extends React.Component {
    constructor(){
        super()
    }

    render() {
        let { message, values, tagName: Element, ...rest } = this.props
        message = template(message, values, rest)
        return <Element dangerouslySetInnerHTML={ {__html: message } } />
    }
}

FormattedHTMLMessage.defaultProps = defaultProps

let ReactI18nMap = {
    FormattedMessage
    , FormattedHTMLMessage
}

export default ReactI18nMap

index.test.js

import React from 'react';
import {FormattedHTMLMessage, FormattedMessage} from './index.js';
import render from './render.js';

export default t => {
    t.test('FormattedMessage', t => {
        t.test('return react component', t => {
            let $ = render(<FormattedMessage message="hello"/>);
            t.equal($('span').html(), 'hello');
        });

        t.test('return blank message', t => {
            let $ = render(<FormattedMessage message=""/>);
            t.equal($('span').html(), '');
        });

        t.test('return interpolated message', t => {
            let $ = render(
                <FormattedMessage message="hello {foo}" values={{foo: 'world'}}/>
            );
            t.equal($('span').html(), 'hello world');
        });
    });

    t.test('FormattedHTMLMessage', t => {
        t.test('return blank message', t => {
            let $ = render(<FormattedHTMLMessage/>);
            t.equal($('span').html(), '');
        });

        t.test('allows us to set props', t => {
            let $ = render(<FormattedHTMLMessage message="heya"/>);
            t.equal($('span').html(), 'heya');

            $ = render(<FormattedHTMLMessage message="foo"/>);
            t.equal($('span').html(), 'foo');
        });

        t.test('return interpolated message', t => {
            let $ = render(
                <FormattedHTMLMessage
                    message="hello {foo}, yo {bar}"
                    values={{foo: 'world', bar: 'chris'}}
                />
            );
            t.equal($('span').html(), 'hello world, yo chris');
        });

        t.test('return interpolated message with with normal props', t => {
            let $ = render(
                <FormattedHTMLMessage
                    message="hello {foo}, yo {bar}"
                    foo="world"
                    bar="chris"
                />
            );
            t.equal($('span').html(), 'hello world, yo chris');
        });

        t.test(
            'return interpolated message with with react element as props',
            t => {
                const element = <span>chris</span>;
                let $ = render(
                    <FormattedHTMLMessage
                        message="hello {foo}, yo {bar}"
                        foo="world"
                        bar={element}
                    />
                );
                t.equal($('span').html(), 'hello world, yo <span>chris</span>');
            }
        );
    });
};

package.json

{
  "name": "babel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel *.js -d lib",
    "dev": "npm run build -- -w",
    "test": "time pta lib/*.test.js",
    "test:coverage": "c8 pta lib/*.test.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/preset-react": "^7.0.0",
    "c8": "^7.0.1",
    "pta": "^0.1.3"
  },
  "dependencies": {
    "cheerio": "^1.0.0-rc.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

render.js

import reactDom from "react-dom/server";
import dom from "cheerio";

const render = component => dom.load(reactDom.renderToStaticMarkup(component));

export default render;

utils.js

import React from "react";
import ReactDOMServer from "react-dom/server";

function isObject(obj) {
    return obj === Object(obj);
}

export function template(message, values = {}, rest = {}) {
    if (!message) {
        return "";
    }

    if (isObject(values) && Object.keys(values).length > 0) {
        // remove spaces
        message = message.replace(/(\{)\s*(\S+)\s*(?=})/gim, "$1$2");
        Object.keys(values).forEach(item => {
            message = message.split(`{${item}}`).join(values[item]);
        });

        return message;
    }

    if (isObject(rest) && Object.keys(rest).length > 0) {
        // remove spaces
        message = message.replace(/(\{)\s*(\S+)\s*(?=})/gim, "$1$2");
        Object.keys(rest).forEach(item => {
            let element = rest[item];

            if (React.isValidElement(element)) {
                element = ReactDOMServer.renderToStaticMarkup(element);
            }

            message = message.split(`{${item}}`).join(element);
        });

        return message;
    }

    return message;
}

export let defaultProps = {
    values: {},
    tagName: "span"
};

utils.test.js

import { template } from "./utils.js";
import React from "react";

export default t => {
    t.test("is function", t => {
        t.equal(typeof template == "function", true);
    });

    t.test("returns blank if message is blank", t => {
        const actual = template("");
        t.equal(actual, "");
    });

    t.test("returns message", t => {
        const actual = template("hello");
        t.equal(actual, "hello");
    });

    t.test("returns interpolated message", t => {
        const actual = template("hello {foo}", { foo: "world" });
        t.equal(actual, "hello world");
    });

    t.test("returns interpolated message with spaces", t => {
        const actual = template("hello {   foo   }", { foo: "world" });
        t.equal(actual, "hello world");
    });

    t.test("does not throw if value is not an object", t => {
        const actual = template("hello world", "test");
        t.equal(actual, "hello world");
    });

    t.test("returns interpolated message via rest props", t => {
        const actual = template("hello {foo}", {}, { foo: "world" });
        t.equal(actual, "hello world");
    });

    t.test("returns interpolated message and discards rest props", t => {
        const actual = template("hello {foo}", { foo: "test" }, { foo: "world" });
        t.equal(actual, "hello test");
    });

    t.test(
        "returns interpolated message via rest props and is react element",
        t => {
            const element = <span>test</span>;
            const actual = template("hello {foo}", {}, { foo: element });
            t.equal(actual, "hello <span>test</span>");
        }
    );
};