chore: added tests

.github/workflows/ci.yaml

@@ -7,10 +7,13 @@ jobs:
   ci:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          sparse-checkout: src
+          node-version: "20.18.0"
+
+      - name: Dependencies
+        run: yarn install --frozen-lockfile
 
       - name: Setup Biome CLI
         uses: biomejs/setup-biome@v2
@@ -19,3 +22,6 @@ jobs:
 
       - name: Run Biome
         run: biome ci .
+
+      - name: Run Tests
+        run: yarn test

__test__/unit/__snapshots__/svg2jsx.test.ts.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`svg2jsx tests clean attributes 1`] = `"<svg id="test" fill="red"></svg>"`;
+
+exports[`svg2jsx tests convert attributes 1`] = `"<svg fillRule="evenodd" className="test" data-name="svg"></svg>"`;
+
+exports[`svg2jsx tests convert inline styles to style objects 1`] = `"<svg style={{ marginLeft: "20px", paddingTop: "20px",  }}></svg>"`;
+
+exports[`svg2jsx tests convert nested nodes 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 45 45"><defs><clipPath id="svg-test"></clipPath></defs><circle cx="110" cy="110" r="100" fill="#9c6" clipPath="url(#svg-test)"></circle></svg>"`;
+
+exports[`svg2jsx tests convert text elements 1`] = `"<svg width="200" height="200" viewBox="0 0 100 100"><text>svg2jsx</text></svg>"`;
+
+exports[`svg2jsx tests keep attribute values 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 10"><circle id="svg-test" cx="5" cy="5" r="4" stroke="#00f"></circle><use x="20" fill="#fff" stroke="red" href="#svg-test"></use></svg>"`;
+
+exports[`svg2jsx tests keep dimensions attributes 1`] = `"<svg width="125" height="125" viewBox="0 0 125 125"><path fill="red" d="M49 3v24l12-12z"></path></svg>"`;
+
+exports[`svg2jsx tests quote string style values 1`] = `"<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 45 45"><path d="M12 9.9c-1.1 0-2.1.9-2.1 2.1 0 1.1.9 2.1 2.1 2.1 1.1 0 2.1-.9 2.1-2.1 0-1.1-1-2.1-2.1-2.1" style={{ marginLeft: "auto",  }}></path></svg>"`;
+
+exports[`svg2jsx tests remove unnecessary nodes 1`] = `"<svg></svg>"`;

__test__/unit/svg2jsx.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, test } from "@jest/globals";
+
+import { svg2jsx } from "../../src/pages/api";
+
+describe("svg2jsx tests", () => {
+  test("clean attributes", () => {
+    const jsx = svg2jsx('<svg id=" test " strok="blue" fill="   red" />', {});
+
+    expect(jsx).toEqual(expect.not.stringMatching(/strok/));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("remove unnecessary nodes", () => {
+    const jsx = svg2jsx("<svg><g><g></g></g></svg>", {});
+
+    expect(jsx).toEqual(expect.stringMatching(/<svg><\/svg>/));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("convert attributes", () => {
+    const jsx = svg2jsx('<svg class="test" data-name="svg" fill-rule="evenodd"/>', {});
+
+    expect(jsx).toEqual(expect.stringMatching(/className=/));
+    expect(jsx).toEqual(expect.not.stringMatching(/class=/));
+    expect(jsx).toEqual(expect.stringMatching(/fillRule=/));
+    expect(jsx).toEqual(expect.not.stringMatching(/fill-rule=/));
+    expect(jsx).toEqual(expect.stringMatching(/data-name=/));
+    expect(jsx).toEqual(expect.not.stringMatching(/dataName=/));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("convert inline styles to style objects", () => {
+    const jsx = svg2jsx('<svg style="margin-left:20px;padding-top:20px;" />', {});
+
+    expect(jsx).toEqual(expect.stringMatching(/marginLeft: "20px"/));
+    expect(jsx).toEqual(expect.stringMatching(/paddingTop: "20px"/));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("quote string style values", () => {
+    const jsx = svg2jsx(
+      `<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45">
+        <path style="margin-left: auto;" d="M12,9.9c-1.1,0-2.1,0.9-2.1,2.1c0,1.1,0.9,2.1,2.1,2.1c1.1,0,2.1-0.9,2.1-2.1C14.1,10.9,13.1,9.9,12,9.9z" />
+      </svg>`,
+      {}
+    );
+
+    expect(jsx).toEqual(expect.stringMatching(/marginLeft: "auto"/));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("convert nested nodes", () => {
+    const jsx = svg2jsx(
+      `<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45">
+        <defs>
+          <clipPath id="svg-test">
+            <path style="margin-left: auto;" d="M43,24c1.1-1.5,2.3-3"/>
+          </clipPath>
+        </defs>
+        <circle cx="110" cy="110" r="100" fill="#9c6" clip-path="url(#svg-test)" />
+      </svg>`,
+      {}
+    );
+
+    expect(jsx).toEqual(expect.not.stringMatching(/>\s*>/gm));
+    expect(jsx).toEqual(expect.stringMatching(/<svg/g));
+    expect(jsx).toEqual(expect.stringMatching(/<\/svg/g));
+    expect(jsx).toEqual(expect.stringMatching(/<defs/g));
+    expect(jsx).toEqual(expect.stringMatching(/<\/defs/g));
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("convert text elements", () => {
+    const jsx = svg2jsx(
+      `<svg width="200px" height="200px" viewBox="0 0 100 100">
+        <text>svg2jsx</text>
+      </svg>`,
+      {}
+    );
+
+    expect(jsx.match(/<text>svg2jsx<\/text>/g)).toHaveLength(1);
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("keep dimensions attributes", () => {
+    const jsx = svg2jsx(
+      `<svg width="125px" height="125px" viewBox="0 0 125 125">
+        <path d="M49 3L49 27L61 15L49 3" fill="#ff0000"></path>
+      </svg>`,
+      {}
+    );
+
+    expect(jsx.match(/width="125"/g)).toHaveLength(1);
+    expect(jsx.match(/height="125"/g)).toHaveLength(1);
+    expect(jsx).toMatchSnapshot();
+  });
+
+  test("keep attribute values", () => {
+    const jsx = svg2jsx(
+      `<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+        <circle id="svg-test" cx="5" cy="5" r="4" stroke="blue"/>
+        <use href="#svg-test" x="20" fill="white" stroke="red"/>
+      </svg>`,
+      {}
+    );
+
+    expect(jsx.match(/id="svg-test"/g)).toHaveLength(1);
+    expect(jsx.match(/href="#svg-test"/g)).toHaveLength(1);
+    expect(jsx).toMatchSnapshot();
+  });
+});

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": []
+    "ignore": ["__test__/unit/**/*.test.ts"]
   },
   "formatter": {
     "enabled": true,

jest.config.ts

@@ -1,4 +1,4 @@
-import type { Config } from "jest";
+import { type Config } from "jest";
 
 import jest from "next/jest.js";
 
@@ -8,10 +8,11 @@ const createJestConfig = jest({
 
 const config: Config = {
   coverageProvider: "v8",
-  testEnvironment: "jsdom",
+  testEnvironment: "node",
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
   },
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/dist/"],
 };
 
 export default createJestConfig(config);

package.json

@@ -1,12 +1,12 @@
 {
   "name": "svg2jsx",
-  "version": "0.1.0",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "test": "jest --config jest.config.ts",
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest --config jest.config.ts",
     "lint": "biome ci ./src/**/*",
     "format": "biome format ./src/**/* --write",
     "prepare": "husky"
@@ -57,6 +57,6 @@
     "typescript": "^5.6.3"
   },
   "engines": {
-    "node": ">=19.0.0"
+    "node": ">=18.20.0"
   }
 }

src/pages/api/index.ts

@@ -16,7 +16,7 @@ export type Data = {
 };
 
 export const svg2jsx = flow(
-  (svg: string, options: Options) => clean(svg, options.cleanupIds),
+  (svg: string, options: Options) => clean(svg, options?.cleanupIds),
   (svg: string) => parse(svg),
   (node: Node) => transform(node),
   (node: Node) => stringify(node),

yarn.lock

@@ -368,11 +368,6 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@custom-react-hooks/use-clipboard@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@custom-react-hooks/use-clipboard/-/use-clipboard-1.5.1.tgz#afa2b013ab4b73ec1062af2d490f98d979c9b828"
-  integrity sha512-rXwbVk8GtqZHTJsEWl1ubkE/uEiZR1OpvErdCpvctKVbwwAulhYwfvrU9CvoVywcqbVoj8j+gHYcYXNCyUh4Xw==
-
 "@emnapi/runtime@^1.2.0":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.3.1.tgz#0fcaa575afc31f455fd33534c19381cfce6c6f60"