add: add remark-react output tests

Add `transformToReact` helper using `react-test-renderer`

Add `babel-preset-react` for transpiling JSX

Add `react` devDependency

Add `Icon` mock react component

Comment boolean prop test while waiting for [`remark-react`](https://github.com/mapbox/remark-react) and [`hast-to-hyperscript`](https://github.com/syntax-tree/hast-to-hyperscript) to be updated in remarkjs/remark-react#41
Ignore main function statement as it seems not covered in specific cases...

src/__tests__/react.js

@@ -9,37 +9,37 @@ test(
 
 test(
   "should add an extension with an id",
-  t => t.snapshot(transformToReact("!icon{ #my-id }"))
+  t => t.snapshot(transformToReact("!Icon{ #my-id }"))
 )
 
 test(
   "should add an extension with a class",
-  t => t.snapshot(transformToReact("!icon{ .my-class }"))
+  t => t.snapshot(transformToReact("!Icon{ .my-class }"))
 )
 
 test(
   "should add an extension with an attribute",
-  t => t.snapshot(transformToReact("!icon{ attr=my-attr }"))
+  t => t.snapshot(transformToReact("!Icon{ attr=my-attr }"))
 )
 
 test(
   "should add an extension with a quoted attribute",
-  t => t.snapshot(transformToReact(`!icon{ attr="my attribute" }`))
+  t => t.snapshot(transformToReact(`!Icon{ attr="my attribute" }`))
 )
 
 test(
   "should add an extension with a lone attribute",
-  t => t.snapshot(transformToReact(`!icon{ attr }`))
+  t => t.snapshot(transformToReact(`!Icon{ attr }`))
 )
 
 test(
   "should add an extension with a lone attribute with a default value",
   t => t.snapshot(
     transformToReact(
-      `!icon{ attr }`,
+      `!Icon{ attr }`,
       {
         elements: {
-          icon: {
+          Icon: {
             attributeDefaultValues: {
               attr: "default",
             }
@@ -54,10 +54,10 @@ test(
   "should add an extension with a lone attribute with a default boolean value",
   t => t.snapshot(
     transformToReact(
-      `!icon{ highlight }`,
+      `!Icon{ highlight }`,
       {
         elements: {
-          icon: {
+          Icon: {
             attributeDefaultValues: {
               highlight: true,
             }
@@ -72,10 +72,10 @@ test(
   "should add an extension with all types of parameters",
   t => t.snapshot(
     transformToReact(
-      `!icon{ #my-id .my-class attr attr2=my-attr attr3="my attribute" }`,
+      `!Icon{ #my-id .my-class attr attr2=my-attr attr3="my attribute" }`,
       {
         elements: {
-          icon: {
+          Icon: {
             attributeDefaultValues: {
               attr: "default",
             }
@@ -90,10 +90,10 @@ test(
   "should add an extension with a mapped content",
   t => t.snapshot(
     transformToReact(
-      "!icon[my-tooltip]",
+      "!Icon[my-tooltip]",
       {
         elements: {
-          icon: {
+          Icon: {
             attributeMap: {
               content: "tooltip",
             }
@@ -108,10 +108,10 @@ test(
   "should add an extension with a mapped argument",
   t => t.snapshot(
     transformToReact(
-      "!icon(my-icon)",
+      "!Icon(my-icon)",
       {
         elements: {
-          icon: {
+          Icon: {
             attributeMap: {
               argument: "icon",
             }
@@ -128,7 +128,7 @@ test(
     transformToReact(
       `#heading
 
-!icon(my-icon)`
+!Icon(my-icon)`
     )
   )
 )

src/index.js

@@ -15,6 +15,7 @@ _.mixin({
   }
 })
 
+/* istanbul ignore next */
 function remarkGenericExtensions(options = {}) {
   const settings = Object.assign({}, {
     debug: false,