Get tests working in typescript and run prettier

jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.ts?$": "ts-jest",
+    "^.+\\.js?$": "ts-jest",
+  },
+};

package.json

@@ -61,6 +61,7 @@
     "pretty-quick": "^3.1.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "ts-jest": "^29.0.3",
     "ts-node": "^10.3.0",
     "typescript": "4.5.5"
   },

src/extensions/mjml-comment.js

@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 
-import { handleMjmlProps } from "../utils";
+import { convertPropsToMjmlAttributes } from "../utils";
 
 export class MjmlComment extends Component {
   render() {
     const { children, ...rest } = this.props;
     if (children && children.trim().length) {
       return React.createElement("mj-raw", {
-        ...handleMjmlProps(rest),
+        ...convertPropsToMjmlAttributes(rest),
         dangerouslySetInnerHTML: {
           __html: `<!--${children}-->`,
         },

src/extensions/mjml-tracking-pixel.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { MjmlRaw } from "../mjml-raw";
+import { MjmlRaw } from "..";
 
 export class MjmlTrackingPixel extends Component {
   render() {

src/extensions/mjml-yahoo-style.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { MjmlRaw } from "../mjml-raw";
+import { MjmlRaw } from "..";
 
 export class MjmlYahooStyle extends Component {
   render() {

test/extensions.spec.js

@@ -1,100 +1,99 @@
-import React from 'react';
-import { expect } from 'chai';
-
-import { renderToMjml } from '../src';
+import { expect } from "chai";
+import React from "react";
 
 import {
   MjmlComment,
   MjmlConditionalComment,
   MjmlYahooStyle,
   MjmlTrackingPixel,
   MjmlHtml,
-} from '../src/extensions';
+} from "../src/extensions";
+import { renderToMjml } from "../src/utils/renderToMjml";
 
-describe('extensions', () => {
-  describe('simple comment', () => {
-    it('should render', () => {
+describe("extensions", () => {
+  describe("simple comment", () => {
+    it("should render", () => {
       const comment = (
         <MjmlComment>
           First, solve the problem. Then, write the code.
         </MjmlComment>
       );
       const markup = renderToMjml(comment);
       expect(markup).to.equal(
-        '<mj-raw><!--First, solve the problem. Then, write the code.--></mj-raw>',
+        "<mj-raw><!--First, solve the problem. Then, write the code.--></mj-raw>"
       );
     });
-    it('should not render if comment is empty', () => {
-      expect(renderToMjml(<MjmlComment />)).to.equal('');
-      expect(renderToMjml(<MjmlComment>{''}</MjmlComment>)).to.equal('');
-      expect(renderToMjml(<MjmlComment> </MjmlComment>)).to.equal('');
+    it("should not render if comment is empty", () => {
+      expect(renderToMjml(<MjmlComment />)).to.equal("");
+      expect(renderToMjml(<MjmlComment>{""}</MjmlComment>)).to.equal("");
+      expect(renderToMjml(<MjmlComment> </MjmlComment>)).to.equal("");
     });
   });
 
-  describe('conditional comment', () => {
-    it('should render', () => {
+  describe("conditional comment", () => {
+    it("should render", () => {
       const comment = (
         <MjmlConditionalComment>
           First, solve the problem. Then, write the code.
         </MjmlConditionalComment>
       );
       const markup = renderToMjml(comment);
       expect(markup).to.equal(
-        '<mj-raw><!--[if gte mso 9]>First, solve the problem. Then, write the code.<![endif]--></mj-raw>',
+        "<mj-raw><!--[if gte mso 9]>First, solve the problem. Then, write the code.<![endif]--></mj-raw>"
       );
     });
-    it('should allow changing condition', () => {
+    it("should allow changing condition", () => {
       const comment = (
         <MjmlConditionalComment condition="if IE">
           First, solve the problem. Then, write the code.
         </MjmlConditionalComment>
       );
       const markup = renderToMjml(comment);
       expect(markup).to.equal(
-        '<mj-raw><!--[if IE]>First, solve the problem. Then, write the code.<![endif]--></mj-raw>',
+        "<mj-raw><!--[if IE]>First, solve the problem. Then, write the code.<![endif]--></mj-raw>"
       );
     });
-    it('should not render if comment is empty', () => {
-      expect(renderToMjml(<MjmlConditionalComment />)).to.equal('');
+    it("should not render if comment is empty", () => {
+      expect(renderToMjml(<MjmlConditionalComment />)).to.equal("");
       expect(
-        renderToMjml(<MjmlConditionalComment>{''}</MjmlConditionalComment>),
-      ).to.equal('');
+        renderToMjml(<MjmlConditionalComment>{""}</MjmlConditionalComment>)
+      ).to.equal("");
       expect(
-        renderToMjml(<MjmlConditionalComment> </MjmlConditionalComment>),
-      ).to.equal('');
+        renderToMjml(<MjmlConditionalComment> </MjmlConditionalComment>)
+      ).to.equal("");
     });
   });
 
-  describe('yahoo style', () => {
-    it('should render', () => {
+  describe("yahoo style", () => {
+    it("should render", () => {
       const markup = renderToMjml(
-        <MjmlYahooStyle>{`a { color: blue; }`}</MjmlYahooStyle>,
+        <MjmlYahooStyle>{`a { color: blue; }`}</MjmlYahooStyle>
       );
       expect(markup).to.equal(
-        '<mj-raw><style>@media screen yahoo {a { color: blue; }}</style></mj-raw>',
+        "<mj-raw><style>@media screen yahoo {a { color: blue; }}</style></mj-raw>"
       );
     });
   });
 
-  describe('tracking pixel', () => {
-    it('should render 1x1 raw image with provided src', () => {
-      const markup = renderToMjml(<MjmlTrackingPixel src={'tracking-pixel'} />);
+  describe("tracking pixel", () => {
+    it("should render 1x1 raw image with provided src", () => {
+      const markup = renderToMjml(<MjmlTrackingPixel src={"tracking-pixel"} />);
       expect(markup).to.equal(
-        '<mj-raw><img src="tracking-pixel" style="display:table;height:1px!important;width:1px!important;border:0!important;margin:0!important;padding:0!important" width="1" height="1" border="0"/></mj-raw>',
+        '<mj-raw><img src="tracking-pixel" style="display:table;height:1px!important;width:1px!important;border:0!important;margin:0!important;padding:0!important" width="1" height="1" border="0"/></mj-raw>'
       );
     });
   });
 
-  describe('html', () => {
-    it('should allow rendering given HTML using mj-raw tag by default', () => {
+  describe("html", () => {
+    it("should allow rendering given HTML using mj-raw tag by default", () => {
       const markup = renderToMjml(<MjmlHtml html="<div>hello World</div>" />);
-      expect(markup).to.equal('<mj-raw><div>hello World</div></mj-raw>');
+      expect(markup).to.equal("<mj-raw><div>hello World</div></mj-raw>");
     });
-    it('should allow rendering given HTML using specified tag', () => {
+    it("should allow rendering given HTML using specified tag", () => {
       const markup = renderToMjml(
-        <MjmlHtml tag="span" html="<div>hello World</div>" />,
+        <MjmlHtml tag="span" html="<div>hello World</div>" />
       );
-      expect(markup).to.equal('<span><div>hello World</div></span>');
+      expect(markup).to.equal("<span><div>hello World</div></span>");
     });
   });
 });