Fix JSX compilation

config/jest.config.js

@@ -3,4 +3,12 @@ module.exports = {
   preset: 'ts-jest',
   rootDir: './../src',
   testEnvironment: 'jsdom',
+  globals: {
+    'ts-jest': {
+      // ts-jest configuration goes here
+      tsconfig: {
+        jsx: 'react',
+      },
+    },
+  },
 };

dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":";AAEA;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,0CAA0D,MAAM,KAAG,WAyBhF,CAAC;AAEF,eAAe,QAAQ,CAAC","sources":["src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,"import React from 'react';\n\ninterface IProps {\n  children?: React.ReactNode;\n  conjuction?: string;\n  oxfordComma?: boolean;\n}\n\nconst ReactAnd = ({ children, conjuction = 'and', oxfordComma = true }: IProps): JSX.Element => {\n  if (!children) {\n    return <></>;\n  }\n  if (!Array.isArray(children) || children.length === 1) {\n    return <>{children}</>;\n  }\n  if (children.length === 2) {\n    return <>{[children[children.length - 2], ` ${conjuction} `, children[children.length - 1]]}</>;\n  }\n  const commaSeparatedItems = children\n    .slice(0, children.length - 2)\n    .reduce((previous: React.ReactNode[], current) => {\n      return [...previous, current, ', '];\n    }, []);\n  return (\n    <>\n      {[\n        ...commaSeparatedItems,\n        children[children.length - 2],\n        oxfordComma ? `, ${conjuction} ` : ` ${conjuction} `,\n        children[children.length - 1],\n      ]}\n    </>\n  );\n};\n\nexport default ReactAnd;\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../"}
+{"mappings":";AAEA;IACE,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,0CAA0D,MAAM,KAAG,WAyBhF,CAAC;AAEF,eAAe,QAAQ,CAAC","sources":["src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,"import React from 'react';\n\ninterface IProps {\n  children?: React.ReactNode;\n  conjuction?: string;\n  oxfordComma?: boolean;\n}\n\nconst ReactAnd = ({ children, conjuction = 'and', oxfordComma = true }: IProps): JSX.Element => {\n  if (!children) {\n    return <></>;\n  }\n  if (!Array.isArray(children) || children.length === 1) {\n    return <>{children}</>;\n  }\n  if (children.length === 2) {\n    return <>{[children[children.length - 2], ` ${conjuction} `, children[children.length - 1]]}</>;\n  }\n  const commaSeparatedItems = children\n    .slice(0, children.length - 2)\n    .reduce((previous: React.ReactNode[], current) => {\n      return [...previous, current, ', '];\n    }, []);\n  return (\n    <>\n      {[\n        ...commaSeparatedItems,\n        children[children.length - 2],\n        oxfordComma ? `, ${conjuction} ` : ` ${conjuction} `,\n        children[children.length - 1],\n      ]}\n    </>\n  );\n};\n\nexport default ReactAnd;\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-and",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A lightweight React component for joining multiple components in a grammatically correct way.",
   "keywords": [
     "react",

tsconfig.json

@@ -17,7 +17,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "outDir": "dist",
-    "jsx": "react",
+    "jsx": "preserve",
     "declaration": true,
     "lib": [
       "dom",