diff --git a/jestconfig.json b/jestconfig.json
index 20c25c0..0f48292 100644
--- a/jestconfig.json
+++ b/jestconfig.json
@@ -1,6 +1,6 @@
 {
   "transform": {
-    "^.+\\.(t|j)sx?$": "ts-jest"
+    "^.+\\.(t|j)sx?$": "esbuild-jest"
   },
   "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
   "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
diff --git a/package.json b/package.json
index 2d0cc33..3afd4e6 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "./lib/**/*"
   ],
   "scripts": {
+    "test:browser": "npm run build && cp ./src/__tests__/index.html ./lib/ && bash -c 'for module in \".\\/cache\" \".\\/types\" \".\\/utils\"; do sed -i \"s/$module/$module.js/g\" ./lib/index.js; done' && serve -s lib",
     "build": "tsc",
     "test": "jest --config jestconfig.json --passWithNoTests",
     "prepare": "npm run build",
@@ -32,8 +33,9 @@
   "homepage": "https://github.com/dm1sh/html-pagination#readme",
   "devDependencies": {
     "@types/jest": "^26.0.24",
+    "esbuild": "^0.12.17",
+    "esbuild-jest": "^0.5.0",
     "jest": "^27.0.6",
-    "ts-jest": "^27.0.4",
     "typescript": "^4.3.5"
   }
 }
diff --git a/src/__tests__/index.html b/src/__tests__/index.html
new file mode 100644
index 0000000..fbc497f
--- /dev/null
+++ b/src/__tests__/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
+      #content {
+        display: none;
+      }
+      .appContainer {
+        height: 200px;
+        width: 200px;
+        display: flex;
+        border: 1px black solid;
+      }
+      #container {
+        overflow: auto;
+      }
+    </style>
+    <div id="content">
+      <div>
+        <h1>Hello, my dear friend</h1>
+        <p>
+          You can run npm list -g to see which global libraries are installed
+          and where they're located. Use npm list -g | head -1 for truncated
+          output showing just the path. If you want to display only main
+          packages not its sub-packages which installs along with it - you can
+          use - npm list --depth=0 which will show all packages and for getting
+          only globally installed packages, just add -g i.e. npm list -g
+          --depth=0.
+        </p>
+      </div>
+    </div>
+    <div class="appContainer">
+      <div id="container"></div>
+    </div>
+    <script type="module">
+      import { HTMLPagination } from "./index.js";
+
+      const content = document.getElementById("content");
+      const container = document.getElementById("container");
+
+      class ci {
+        g(key) {
+          localStorage.setItem("book" + key);
+        }
+
+        s(key, value) {
+          localStorage.getItem("book" + key, value);
+        }
+      }
+
+      const pg = new HTMLPagination(content, container, ci);
+
+      const r = async (prev) => {
+        try {
+          const res = pg.getPageBreak(prev, 100);
+          await setTimeout(() => r(res), 1000);
+        } catch (e) {
+          r(0);
+        }
+      };
+
+      r(0);
+    </script>
+  </body>
+</html>
diff --git a/tsconfig.json b/tsconfig.json
index ca4bf6a..01a683f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "commonjs",
+    "module": "ESNext",
+    "moduleResolution": "node",
     "declaration": true,
     "outDir": "./lib",
     "strict": true
