JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.11.0/qunit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.11.0/qunit.min.js"></script>
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
          
    </body>
</html>

JavaScript

Array.isArray = Array.isArray || function(obj){
	return Object.prototype.toString.call(obj) === "[object Array]";
};
var flatten = function(arr){
	if(!Array.isArray(arr)){
		return (arr === null || arr === undefined) ? null : [arr];
	}
	var result = [], obj;
	for(var i = 0, len = arr.length; i < len; i++){
		obj = arr[i];
		if(Array.isArray(arr)){
			obj = flatten(obj);
		}
		result = result.concat( obj );
	}
    return result;
};
test("simple array", function(){
    var fn = flatten;
    deepEqual(fn(), null);
    deepEqual(fn(null), null);
    deepEqual(fn([]), []);
    deepEqual(fn([1,2]), [1,2]);
});
test("nested", function(){
    var fn = flatten;
    deepEqual(fn([[]]), []);
    deepEqual(fn([[1],2]), [1,2]);
    deepEqual(fn([[1,2],3,[4]]), [1,2,3,4]);
});

test("deeply nested", function(){
    var fn = flatten;
    deepEqual(fn([[]]), []);
    deepEqual(fn([[1],2]), [1,2]);
    deepEqual(fn([[1,2],3,[4]]), [1,2,3,4]);
    deepEqual(fn([[1,2],3,[4,5],[[6],[[[[7]]]]]]), [1,2,3,4,5,6,7]);
	deepEqual(fn([1,[1,[1,[1,[{price:3}]]]]]), [1,1,1,1,{"price":3}]);
});