Switched to enzyme

package.json

@@ -42,6 +42,7 @@
     "babel-preset-react": "^6.5.0",
     "babel-runtime": "^6.5.0",
     "css-loader": "^0.23.1",
+    "enzyme": "^2.4.1",
     "eslint": "^3.5.0",
     "eslint-plugin-react": "^5.1.1",
     "expect": "^1.20.2",
@@ -60,6 +61,7 @@
     "postcss-loader": "^0.9.1",
     "pre-commit": "^1.1.3",
     "react": "^15.1.0",
+    "react-addons-test-utils": "^15.3.2",
     "react-dom": "^15.1.0",
     "react-hot-loader": "^3.0.0-beta.2",
     "react-immutable-proptypes": "^1.6.0",
@@ -68,7 +70,6 @@
     "react-redux": "^4.4.0",
     "react-router": "^2.5.1",
     "react-router-redux": "^4.0.5",
-    "react-test-renderer": "^15.3.2",
     "redux": "^3.3.1",
     "redux-thunk": "^1.0.3",
     "sass-loader": "^4.0.2",

src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js

@@ -1,10 +1,41 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
 import markdownSyntax from 'markup-it/syntaxes/markdown';
 import htmlSyntax from 'markup-it/syntaxes/html';
 import MarkitupReactRenderer from '../MarkitupReactRenderer';
 
 describe('MarkitupReactRenderer', () => {
+  it('should re-render properly after a value and syntax update', () => {
+    const component = shallow(
+      <MarkitupReactRenderer
+          value="# Title"
+          syntax={markdownSyntax}
+      />
+    );
+    const tree1 = component.html();
+    component.setProps({
+      value: '<h1>Title</h1>',
+      syntax: htmlSyntax
+    });
+    const tree2 = component.html();
+    expect(tree1).toEqual(tree2);
+  });
+
+  it('should not update the parser if syntax didn\'t change', () => {
+    const component = shallow(
+      <MarkitupReactRenderer
+          value="# Title"
+          syntax={markdownSyntax}
+      />
+    );
+    const syntax1 = component.instance().props.syntax;
+    component.setProps({
+      value: '## Title',
+    });
+    const syntax2 = component.instance().props.syntax;
+    expect(syntax1).toEqual(syntax2);
+  });
+
   it('should render markdown', () => {
     const value = `
 # H1
@@ -31,39 +62,57 @@ Text with **bold** & _em_ elements
 ![alt text](https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg)
 
 ###### H6
-
 `;
-    const component = renderer.create(
+    const component = shallow(
       <MarkitupReactRenderer
           value={value}
           syntax={markdownSyntax}
       />
     );
-    const tree = component.toJSON();
+    const tree = component.html();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render HTML as is using Markdown', () => {
+    const value = `
+# Title
+
+<dl>
+    <dt>Test HTML content</dt>
+    <dd>Testing HTML in Markdown</dd>
+</dl>
+`;
+    const component = shallow(
+      <MarkitupReactRenderer
+          value={value}
+          syntax={markdownSyntax}
+      />
+    );
+    const tree = component.html();
     expect(tree).toMatchSnapshot();
   });
 
   it('should support custom syntax', () => {
     const value = '';
-    const component = renderer.create(
+    const component = shallow(
       <MarkitupReactRenderer
           value={value}
           syntax={markdownSyntax}
       />
     );
-    const tree = component.toJSON();
+    const tree = component.html();
     expect(tree).toMatchSnapshot();
   });
 
   it('should render HTML', () => {
     const value = '<p class="test class">Paragraph with <em>inline</em> element</p>';
-    const component = renderer.create(
+    const component = shallow(
       <MarkitupReactRenderer
           value={value}
           syntax={htmlSyntax}
       />
     );
-    const tree = component.toJSON();
+    const tree = component.html();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap

@@ -1,88 +1,7 @@
-exports[`MarkitupReactRenderer should render HTML 1`] = `
+exports[`MarkitupReactRenderer should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
-<article>
-  <p>
-    Paragraph with 
-    <em>
-      inline
-    </em>
-     element
-  </p>
-</article>
-`;
 
-exports[`MarkitupReactRenderer should render markdown 1`] = `
+exports[`MarkitupReactRenderer should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1></article>"`;
-<article>
-  <h1
-    id={null}>
-    H1
-  </h1>
-  <p>
-    Text with 
-    <strong>
-      bold
-    </strong>
-     & 
-    <em>
-      em
-    </em>
-     elements
-  </p>
-  <h2
-    id={null}>
-    H2
-  </h2>
-  <ul>
-    <li
-      loose={false}>
-      ul item 1
-    </li>
-    <li
-      loose={false}>
-      ul item 2
-    </li>
-  </ul>
-  <h3
-    id={null}>
-    H3
-  </h3>
-  <ol>
-    <li
-      loose={false}>
-      ol item 1
-    </li>
-    <li
-      loose={false}>
-      ol item 2
-    </li>
-    <li
-      loose={false}>
-      ol item 3
-    </li>
-  </ol>
-  <h4
-    id={null}>
-    H4
-  </h4>
-  <p>
-    <a
-      href="http://google.com">
-      link title
-    </a>
-  </p>
-  <h5
-    id={null}>
-    H5
-  </h5>
-  <p>
-    <img
-      alt="alt text"
-      src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
-  </p>
-  <h6
-    id={null}>
-    H6
-  </h6>
-</article>
-`;
 
-exports[`MarkitupReactRenderer should support custom syntax 1`] = `<article />`;
+exports[`MarkitupReactRenderer should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> &amp; <em>em</em> elements</p><h2>H2</h2><ul><li>ul item 1</li><li>ul item 2</li></ul><h3>H3</h3><ol><li>ol item 1</li><li>ol item 2</li><li>ol item 3</li></ol><h4>H4</h4><p><a href=\"http://google.com\">link title</a></p><h5>H5</h5><p><img alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`;
+
+exports[`MarkitupReactRenderer should support custom syntax 1`] = `"<article></article>"`;