From 35d588c38f46dc6ae70c0be68e3ad29c4daffdb8 Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Mon, 18 Nov 2024 19:30:28 +0100
Subject: [PATCH 1/5] Install melange-testing-library

---
 dune-project      |   6 ++
 package-lock.json | 173 ++++++++++++++++++++++++++++++++++++----------
 reason-react.opam |   1 +
 test/dune         |   8 ++-
 4 files changed, 152 insertions(+), 36 deletions(-)

diff --git a/dune-project b/dune-project
index fbeb92d80..427e00e73 100644
--- a/dune-project
+++ b/dune-project
@@ -41,6 +41,12 @@
   (reason
    (>= 3.12.0))
   (ocaml-lsp-server :with-dev-setup)
+  (melange-testing-library
+   (and
+    (= "0.1.0")
+    :with-test
+    :with-dev-setup
+    :post))
   (opam-check-npm-deps
    (and
     (= 1.0.0)
diff --git a/package-lock.json b/package-lock.json
index 56484d8a6..b11818400 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "reason-react",
       "version": "0.11.0",
       "license": "MIT",
+      "dependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.0.1"
+      },
       "devDependencies": {
         "jest": "^26.0.1",
         "react": "^18.2.0",
@@ -32,7 +36,6 @@
       "version": "7.22.13",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
       "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.22.13",
         "chalk": "^2.4.2"
@@ -45,7 +48,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -57,7 +59,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -71,7 +72,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -79,14 +79,12 @@
     "node_modules/@babel/code-frame/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -95,7 +93,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -104,7 +101,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -293,7 +289,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -325,7 +320,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
       "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -339,7 +333,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -351,7 +344,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -365,7 +357,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -373,14 +364,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -389,7 +378,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -398,7 +386,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -565,6 +552,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -954,6 +953,78 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
+      "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -963,6 +1034,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.2",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.2.tgz",
@@ -1156,7 +1233,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -1165,7 +1241,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1198,6 +1273,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1554,7 +1638,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -1729,7 +1812,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1740,8 +1822,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1906,6 +1987,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -1924,6 +2014,12 @@
         "node": ">= 10.14.2"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "license": "MIT"
+    },
     "node_modules/domexception": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
@@ -2524,7 +2620,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3565,8 +3660,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "3.14.1",
@@ -3712,7 +3806,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -3729,6 +3822,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -4417,7 +4519,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4429,7 +4530,6 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -4441,8 +4541,7 @@
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-shallow-renderer": {
       "version": "16.15.0",
@@ -4527,6 +4626,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -4988,7 +5093,6 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
       "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -5558,7 +5662,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
diff --git a/reason-react.opam b/reason-react.opam
index e2329051c..13fb0a5f3 100644
--- a/reason-react.opam
+++ b/reason-react.opam
@@ -23,6 +23,7 @@ depends: [
   "reason-react-ppx" {= version}
   "reason" {>= "3.12.0"}
   "ocaml-lsp-server" {with-dev-setup}
+  "melange-testing-library" {= "0.1.0" & with-test & with-dev-setup & post}
   "opam-check-npm-deps" {= "1.0.0" & with-dev-setup}
   "ocamlformat" {= "0.24.0" & with-dev-setup}
   "odoc" {with-doc}
diff --git a/test/dune b/test/dune
index a50a84e20..fd66b7258 100644
--- a/test/dune
+++ b/test/dune
@@ -3,6 +3,12 @@
  (target test)
  (module_systems
   (commonjs bs.js))
- (libraries reason-react reason-react.node jest melange.belt)
+ (libraries
+  reason-react
+  reason-react.node
+  jest
+  melange.belt
+  melange-testing-library.dom
+  melange-testing-library.react)
  (preprocess
   (pps melange.ppx reason-react-ppx)))

From 1cd6a6b919398123511ee13a78aba2764c91b047 Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Mon, 18 Nov 2024 19:31:51 +0100
Subject: [PATCH 2/5] Install melange-testing-library npm deps

---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 63bf49935..6020ed48a 100644
--- a/package.json
+++ b/package.json
@@ -40,5 +40,9 @@
     "testMatch": [
       "**/*__test.bs.js"
     ]
+  },
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.1"
   }
 }

From 05aa7e129bd028f701e93530f00ea4a3e8a175e4 Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Mon, 18 Nov 2024 20:52:39 +0100
Subject: [PATCH 3/5] Vendor melange-testing-library

---
 test/melange-testing-library/README.md        |    5 +
 .../dom/DomTestingLibrary.re                  |    4 +
 .../dom/DomTestingLibrary.rei                 |  858 +++++++++++++
 test/melange-testing-library/dom/FireEvent.re |  404 ++++++
 .../melange-testing-library/dom/FireEvent.rei |   71 ++
 test/melange-testing-library/dom/Queries.re   | 1126 +++++++++++++++++
 test/melange-testing-library/dom/Utils.re     |  176 +++
 test/melange-testing-library/dom/dune         |    7 +
 .../react/ReactTestingLibrary.re              | 1044 +++++++++++++++
 .../react/ReactTestingLibrary.rei             |  702 ++++++++++
 test/melange-testing-library/react/dune       |    7 +
 11 files changed, 4404 insertions(+)
 create mode 100644 test/melange-testing-library/README.md
 create mode 100644 test/melange-testing-library/dom/DomTestingLibrary.re
 create mode 100644 test/melange-testing-library/dom/DomTestingLibrary.rei
 create mode 100644 test/melange-testing-library/dom/FireEvent.re
 create mode 100644 test/melange-testing-library/dom/FireEvent.rei
 create mode 100644 test/melange-testing-library/dom/Queries.re
 create mode 100644 test/melange-testing-library/dom/Utils.re
 create mode 100644 test/melange-testing-library/dom/dune
 create mode 100644 test/melange-testing-library/react/ReactTestingLibrary.re
 create mode 100644 test/melange-testing-library/react/ReactTestingLibrary.rei
 create mode 100644 test/melange-testing-library/react/dune

diff --git a/test/melange-testing-library/README.md b/test/melange-testing-library/README.md
new file mode 100644
index 000000000..9711773d1
--- /dev/null
+++ b/test/melange-testing-library/README.md
@@ -0,0 +1,5 @@
+### vendored melange-testing-library
+
+This directory contains a vendored version of the melange-testing-library.
+
+The original repository is https://github.com/melange-community/melange-testing-library
diff --git a/test/melange-testing-library/dom/DomTestingLibrary.re b/test/melange-testing-library/dom/DomTestingLibrary.re
new file mode 100644
index 000000000..b2845661b
--- /dev/null
+++ b/test/melange-testing-library/dom/DomTestingLibrary.re
@@ -0,0 +1,4 @@
+include Queries;
+include Utils;
+
+module FireEvent = FireEvent;
diff --git a/test/melange-testing-library/dom/DomTestingLibrary.rei b/test/melange-testing-library/dom/DomTestingLibrary.rei
new file mode 100644
index 000000000..f8989f68b
--- /dev/null
+++ b/test/melange-testing-library/dom/DomTestingLibrary.rei
@@ -0,0 +1,858 @@
+module FireEvent = FireEvent;
+
+module ByLabelTextQuery: {
+  type options = {
+    .
+    "selector": Js.undefined(string),
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~selector: string=?,
+      ~exact: bool=?,
+      ~normalizer: string => string=?,
+      unit
+    ) =>
+    options;
+};
+module ByPlaceholderTextQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByTextQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "selector": Js.undefined(string),
+    "ignore": Js.undefined(string),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~exact: bool=?,
+      ~selector: string=?,
+      ~ignore: string=?,
+      ~normalizer: string => string=?,
+      unit
+    ) =>
+    options;
+};
+module ByAltTextQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByTitleQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByDisplayValueQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByRoleQuery: {
+  type options = {
+    .
+    "checked": Js.undefined(bool),
+    "collapseWhitespace": Js.undefined(bool),
+    "exact": Js.undefined(bool),
+    "hidden": Js.undefined(bool),
+    "level": Js.undefined(int),
+    "pressed": Js.undefined(bool),
+    "name": Js.undefined(string),
+    "normalizer": Js.undefined(string => string),
+    "queryFallbacks": Js.undefined(bool),
+    "selected": Js.undefined(bool),
+    "trim": Js.undefined(bool),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~checked: bool=?,
+      ~collapseWhitespace: bool=?,
+      ~exact: bool=?,
+      ~hidden: bool=?,
+      ~level: int=?,
+      ~pressed: bool=?,
+      ~name: string=?,
+      ~normalizer: string => string=?,
+      ~queryFallbacks: bool=?,
+      ~selected: bool=?,
+      ~trim: bool=?,
+      unit
+    ) =>
+    options;
+};
+module ByTestIdQuery: {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module MutationObserver: {
+  type options = {
+    .
+    "attributeFilter": Js.undefined(array(string)),
+    "attributeOldValue": Js.undefined(bool),
+    "attributes": Js.undefined(bool),
+    "characterData": Js.undefined(bool),
+    "characterDataOldValue": Js.undefined(bool),
+    "childList": Js.undefined(bool),
+    "subtree": Js.undefined(bool),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~attributeFilter: array(string)=?,
+      ~attributeOldValue: bool=?,
+      ~attributes: bool=?,
+      ~characterData: bool=?,
+      ~characterDataOldValue: bool=?,
+      ~childList: bool=?,
+      ~subtree: bool=?,
+      unit
+    ) =>
+    options;
+};
+module WaitFor: {
+  type options = {
+    .
+    "container": Js.undefined(Dom.element),
+    "interval": Js.undefined(int),
+    "mutationObserverOptions": Js.undefined(MutationObserver.options),
+    "onTimeout": Js.undefined(Js.Exn.t => Js.Exn.t),
+    "showOriginalStackTrace": Js.undefined(bool),
+    "stackTraceError": Js.undefined(Js.Exn.t),
+    "timeout": Js.undefined(int),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~container: Dom.element=?,
+      ~interval: int=?,
+      ~mutationObserverOptions: MutationObserver.options=?,
+      ~onTimeout: Js.Exn.t => Js.Exn.t=?,
+      ~showOriginalStackTrace: bool=?,
+      ~stackTraceError: Js.Exn.t=?,
+      ~timeout: int=?,
+      unit
+    ) =>
+    options;
+};
+module WaitForElement: {
+  type options = {
+    .
+    "container": Js.undefined(Dom.element),
+    "timeout": Js.undefined(int),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~container: Dom.element=?,
+      ~mutationObserverInit: MutationObserver.options=?,
+      ~timeout: int=?,
+      unit
+    ) =>
+    options;
+};
+
+let waitFor:
+  (~callback: unit => unit, ~options: WaitFor.options=?, unit) =>
+  Js.Promise.t('a);
+
+let waitForPromise:
+  (~callback: unit => Js.Promise.t('a), ~options: WaitFor.options=?, unit) =>
+  Js.Promise.t('b);
+
+let waitForElement:
+  (~callback: unit => 'a=?, ~options: WaitForElement.options=?, unit) =>
+  Js.Promise.t('a);
+
+let waitForElementToBeRemoved:
+  (
+    ~callback: [
+      | `Func(unit => 'a)
+      | `Value('a)
+    ],
+    ~options: WaitFor.options=?,
+    unit
+  ) =>
+  Js.Promise.t(unit);
+
+let prettyDOM: (~maxLength: int=?, Dom.element) => string;
+
+let logDOM: (~maxLength: int=?, Dom.element) => unit;
+
+module Configure: {
+  type options = {
+    .
+    "_disableExpensiveErrorDiagnostics": Js.undefined(bool),
+    "asyncUtilTimeout": Js.undefined(int),
+    "asyncWrapper": Js.undefined(unit => unit),
+    "computedStyleSupportsPseudoElements": Js.undefined(bool),
+    "defaultHidden": Js.undefined(bool),
+    "eventWrapper": Js.undefined(unit => unit),
+    "getElementError": Js.undefined((string, Dom.element) => Js.Exn.t),
+    "showOriginalStackTrace": Js.undefined(bool),
+    "testIdAttribute": Js.undefined(string),
+    "throwSuggestions": Js.undefined(bool),
+  };
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~_disableExpensiveErrorDiagnostics: bool=?,
+      ~asyncUtilTimeout: int=?,
+      ~asyncWrapper: unit => unit=?,
+      ~computedStyleSupportsPseudoElements: bool=?,
+      ~defaultHidden: bool=?,
+      ~eventWrapper: unit => unit=?,
+      ~getElementError: (string, Dom.element) => Js.Exn.t=?,
+      ~showOriginalStackTrace: bool=?,
+      ~testIdAttribute: string=?,
+      ~throwSuggestions: bool=?,
+      unit
+    ) =>
+    options;
+};
+
+let configure:
+  (
+    ~update: [
+      | `Func(Configure.options => Configure.options)
+      | `Object(Configure.options)
+    ]
+  ) =>
+  unit;
+
+[@mel.module "@testing-library/dom"]
+external getNodeText: Dom.element => string = "getNodeText";
+
+/**
+ * ByLabelText
+ */
+let getByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByLabelTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByPlaceholderText
+ */
+let getByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByPlaceholderTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByText
+ */
+let getByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByAltText
+ */
+let getByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByAltTextQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByTitle
+ */
+let getByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByTitle:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTitleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByDisplayValue
+ */
+let getByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByDisplayValueQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByRole
+ */
+let getByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByRole:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByRoleQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+/**
+ * ByTestId
+ */
+let getByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  Dom.element;
+
+let getAllByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let queryByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  array(Dom.element);
+
+let findByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByTestId:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: ByTestIdQuery.options=?,
+    Dom.element
+  ) =>
+  Js.Promise.t(array(Dom.element));
diff --git a/test/melange-testing-library/dom/FireEvent.re b/test/melange-testing-library/dom/FireEvent.re
new file mode 100644
index 000000000..0fb3b560b
--- /dev/null
+++ b/test/melange-testing-library/dom/FireEvent.re
@@ -0,0 +1,404 @@
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _abort: (Dom.element, Js.undefined(Js.t({..}))) => unit = "abort";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _animationEnd: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "animationEnd";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _animationIteration: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "animationIteration";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _animationStart: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "animationStart";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _blur: (Dom.element, Js.undefined(Js.t({..}))) => unit = "blur";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _canPlay: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "canPlay";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _canPlayThrough: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "canPlayThrough";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _change: (Dom.element, Js.undefined(Js.t({..}))) => unit = "change";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _click: (Dom.element, Js.undefined(Js.t({..}))) => unit = "click";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _compositionEnd: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "compositionEnd";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _compositionStart: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "compositionStart";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _compositionUpdate: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "compositionUpdate";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _contextMenu: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "contextMenu";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _copy: (Dom.element, Js.undefined(Js.t({..}))) => unit = "copy";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _cut: (Dom.element, Js.undefined(Js.t({..}))) => unit = "cut";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dblClick: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dblClick";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _doubleClick: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "doubleClick";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _drag: (Dom.element, Js.undefined(Js.t({..}))) => unit = "drag";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragEnd: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragEnd";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragEnter: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragEnter";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragExit: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragExit";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragLeave: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragLeave";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragOver: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragOver";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _dragStart: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "dragStart";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _drop: (Dom.element, Js.undefined(Js.t({..}))) => unit = "drop";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _durationChange: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "durationChange";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _emptied: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "emptied";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _encrypted: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "encrypted";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _ended: (Dom.element, Js.undefined(Js.t({..}))) => unit = "ended";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _error: (Dom.element, Js.undefined(Js.t({..}))) => unit = "error";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _focus: (Dom.element, Js.undefined(Js.t({..}))) => unit = "focus";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _focusIn: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "focusIn";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _focusOut: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "focusOut";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _input: (Dom.element, Js.undefined(Js.t({..}))) => unit = "input";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _invalid: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "invalid";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _keyDown: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "keyDown";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _keyPress: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "keyPress";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _keyUp: (Dom.element, Js.undefined(Js.t({..}))) => unit = "keyUp";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _load: (Dom.element, Js.undefined(Js.t({..}))) => unit = "load";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _loadStart: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "loadStart";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _loadedData: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "loadedData";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _loadedMetadata: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "loadedMetadata";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseDown: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseDown";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseEnter: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseEnter";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseLeave: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseLeave";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseMove: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseMove";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseOut: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseOut";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseOver: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseOver";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _mouseUp: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "mouseUp";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _paste: (Dom.element, Js.undefined(Js.t({..}))) => unit = "paste";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _pause: (Dom.element, Js.undefined(Js.t({..}))) => unit = "pause";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _play: (Dom.element, Js.undefined(Js.t({..}))) => unit = "play";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _playing: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "playing";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _progress: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "progress";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _rateChange: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "rateChange";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _scroll: (Dom.element, Js.undefined(Js.t({..}))) => unit = "scroll";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _seeked: (Dom.element, Js.undefined(Js.t({..}))) => unit = "seeked";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _seeking: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "seeking";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _select: (Dom.element, Js.undefined(Js.t({..}))) => unit = "select";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _stalled: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "stalled";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _submit: (Dom.element, Js.undefined(Js.t({..}))) => unit = "submit";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _suspend: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "suspend";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _timeUpdate: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "timeUpdate";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _touchCancel: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "touchCancel";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _touchEnd: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "touchEnd";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _touchMove: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "touchMove";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _touchStart: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "touchStart";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _transitionEnd: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "transitionEnd";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _volumeChange: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "volumeChange";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _waiting: (Dom.element, Js.undefined(Js.t({..}))) => unit =
+  "waiting";
+
+[@mel.module "@testing-library/dom"] [@mel.scope "fireEvent"]
+external _wheel: (Dom.element, Js.undefined(Js.t({..}))) => unit = "wheel";
+
+let abort = (~eventInit=?, el) =>
+  _abort(el, Js.Undefined.fromOption(eventInit));
+let animationEnd = (~eventInit=?, el) =>
+  _animationEnd(el, Js.Undefined.fromOption(eventInit));
+let animationIteration = (~eventInit=?, el) =>
+  _animationIteration(el, Js.Undefined.fromOption(eventInit));
+let animationStart = (~eventInit=?, el) =>
+  _animationStart(el, Js.Undefined.fromOption(eventInit));
+let blur = (~eventInit=?, el) =>
+  _blur(el, Js.Undefined.fromOption(eventInit));
+let canPlay = (~eventInit=?, el) =>
+  _canPlay(el, Js.Undefined.fromOption(eventInit));
+let canPlayThrough = (~eventInit=?, el) =>
+  _canPlayThrough(el, Js.Undefined.fromOption(eventInit));
+let change = (~eventInit=?, el) =>
+  _change(el, Js.Undefined.fromOption(eventInit));
+let click = (~eventInit=?, el) =>
+  _click(el, Js.Undefined.fromOption(eventInit));
+let compositionEnd = (~eventInit=?, el) =>
+  _compositionEnd(el, Js.Undefined.fromOption(eventInit));
+let compositionStart = (~eventInit=?, el) =>
+  _compositionStart(el, Js.Undefined.fromOption(eventInit));
+let compositionUpdate = (~eventInit=?, el) =>
+  _compositionUpdate(el, Js.Undefined.fromOption(eventInit));
+let contextMenu = (~eventInit=?, el) =>
+  _contextMenu(el, Js.Undefined.fromOption(eventInit));
+let copy = (~eventInit=?, el) =>
+  _copy(el, Js.Undefined.fromOption(eventInit));
+let cut = (~eventInit=?, el) =>
+  _cut(el, Js.Undefined.fromOption(eventInit));
+let dblClick = (~eventInit=?, el) =>
+  _dblClick(el, Js.Undefined.fromOption(eventInit));
+let doubleClick = (~eventInit=?, el) =>
+  _doubleClick(el, Js.Undefined.fromOption(eventInit));
+let drag = (~eventInit=?, el) =>
+  _drag(el, Js.Undefined.fromOption(eventInit));
+let dragEnd = (~eventInit=?, el) =>
+  _dragEnd(el, Js.Undefined.fromOption(eventInit));
+let dragEnter = (~eventInit=?, el) =>
+  _dragEnter(el, Js.Undefined.fromOption(eventInit));
+let dragExit = (~eventInit=?, el) =>
+  _dragExit(el, Js.Undefined.fromOption(eventInit));
+let dragLeave = (~eventInit=?, el) =>
+  _dragLeave(el, Js.Undefined.fromOption(eventInit));
+let dragOver = (~eventInit=?, el) =>
+  _dragOver(el, Js.Undefined.fromOption(eventInit));
+let dragStart = (~eventInit=?, el) =>
+  _dragStart(el, Js.Undefined.fromOption(eventInit));
+let drop = (~eventInit=?, el) =>
+  _drop(el, Js.Undefined.fromOption(eventInit));
+let durationChange = (~eventInit=?, el) =>
+  _durationChange(el, Js.Undefined.fromOption(eventInit));
+let emptied = (~eventInit=?, el) =>
+  _emptied(el, Js.Undefined.fromOption(eventInit));
+let encrypted = (~eventInit=?, el) =>
+  _encrypted(el, Js.Undefined.fromOption(eventInit));
+let ended = (~eventInit=?, el) =>
+  _ended(el, Js.Undefined.fromOption(eventInit));
+let error = (~eventInit=?, el) =>
+  _error(el, Js.Undefined.fromOption(eventInit));
+let focus = (~eventInit=?, el) =>
+  _focus(el, Js.Undefined.fromOption(eventInit));
+let focusIn = (~eventInit=?, el) =>
+  _focusIn(el, Js.Undefined.fromOption(eventInit));
+let focusOut = (~eventInit=?, el) =>
+  _focusOut(el, Js.Undefined.fromOption(eventInit));
+let input = (~eventInit=?, el) =>
+  _input(el, Js.Undefined.fromOption(eventInit));
+let invalid = (~eventInit=?, el) =>
+  _invalid(el, Js.Undefined.fromOption(eventInit));
+let keyDown = (~eventInit=?, el) =>
+  _keyDown(el, Js.Undefined.fromOption(eventInit));
+let keyPress = (~eventInit=?, el) =>
+  _keyPress(el, Js.Undefined.fromOption(eventInit));
+let keyUp = (~eventInit=?, el) =>
+  _keyUp(el, Js.Undefined.fromOption(eventInit));
+let load = (~eventInit=?, el) =>
+  _load(el, Js.Undefined.fromOption(eventInit));
+let loadStart = (~eventInit=?, el) =>
+  _loadStart(el, Js.Undefined.fromOption(eventInit));
+let loadedData = (~eventInit=?, el) =>
+  _loadedData(el, Js.Undefined.fromOption(eventInit));
+let loadedMetadata = (~eventInit=?, el) =>
+  _loadedMetadata(el, Js.Undefined.fromOption(eventInit));
+let mouseDown = (~eventInit=?, el) =>
+  _mouseDown(el, Js.Undefined.fromOption(eventInit));
+let mouseEnter = (~eventInit=?, el) =>
+  _mouseEnter(el, Js.Undefined.fromOption(eventInit));
+let mouseLeave = (~eventInit=?, el) =>
+  _mouseLeave(el, Js.Undefined.fromOption(eventInit));
+let mouseMove = (~eventInit=?, el) =>
+  _mouseMove(el, Js.Undefined.fromOption(eventInit));
+let mouseOut = (~eventInit=?, el) =>
+  _mouseOut(el, Js.Undefined.fromOption(eventInit));
+let mouseOver = (~eventInit=?, el) =>
+  _mouseOver(el, Js.Undefined.fromOption(eventInit));
+let mouseUp = (~eventInit=?, el) =>
+  _mouseUp(el, Js.Undefined.fromOption(eventInit));
+let paste = (~eventInit=?, el) =>
+  _paste(el, Js.Undefined.fromOption(eventInit));
+let pause = (~eventInit=?, el) =>
+  _pause(el, Js.Undefined.fromOption(eventInit));
+let play = (~eventInit=?, el) =>
+  _play(el, Js.Undefined.fromOption(eventInit));
+let playing = (~eventInit=?, el) =>
+  _playing(el, Js.Undefined.fromOption(eventInit));
+let progress = (~eventInit=?, el) =>
+  _progress(el, Js.Undefined.fromOption(eventInit));
+let rateChange = (~eventInit=?, el) =>
+  _rateChange(el, Js.Undefined.fromOption(eventInit));
+let scroll = (~eventInit=?, el) =>
+  _scroll(el, Js.Undefined.fromOption(eventInit));
+let seeked = (~eventInit=?, el) =>
+  _seeked(el, Js.Undefined.fromOption(eventInit));
+let seeking = (~eventInit=?, el) =>
+  _seeking(el, Js.Undefined.fromOption(eventInit));
+let select = (~eventInit=?, el) =>
+  _select(el, Js.Undefined.fromOption(eventInit));
+let stalled = (~eventInit=?, el) =>
+  _stalled(el, Js.Undefined.fromOption(eventInit));
+let submit = (~eventInit=?, el) =>
+  _submit(el, Js.Undefined.fromOption(eventInit));
+let suspend = (~eventInit=?, el) =>
+  _suspend(el, Js.Undefined.fromOption(eventInit));
+let timeUpdate = (~eventInit=?, el) =>
+  _timeUpdate(el, Js.Undefined.fromOption(eventInit));
+let touchCancel = (~eventInit=?, el) =>
+  _touchCancel(el, Js.Undefined.fromOption(eventInit));
+let touchEnd = (~eventInit=?, el) =>
+  _touchEnd(el, Js.Undefined.fromOption(eventInit));
+let touchMove = (~eventInit=?, el) =>
+  _touchMove(el, Js.Undefined.fromOption(eventInit));
+let touchStart = (~eventInit=?, el) =>
+  _touchStart(el, Js.Undefined.fromOption(eventInit));
+let transitionEnd = (~eventInit=?, el) =>
+  _transitionEnd(el, Js.Undefined.fromOption(eventInit));
+let volumeChange = (~eventInit=?, el) =>
+  _volumeChange(el, Js.Undefined.fromOption(eventInit));
+let waiting = (~eventInit=?, el) =>
+  _waiting(el, Js.Undefined.fromOption(eventInit));
+let wheel = (~eventInit=?, el) =>
+  _wheel(el, Js.Undefined.fromOption(eventInit));
diff --git a/test/melange-testing-library/dom/FireEvent.rei b/test/melange-testing-library/dom/FireEvent.rei
new file mode 100644
index 000000000..1c791995b
--- /dev/null
+++ b/test/melange-testing-library/dom/FireEvent.rei
@@ -0,0 +1,71 @@
+let abort: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let animationEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let animationIteration: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let animationStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let blur: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let canPlay: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let canPlayThrough: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let change: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let click: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let compositionEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let compositionStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let compositionUpdate: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let contextMenu: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let copy: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let cut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dblClick: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let doubleClick: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let drag: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragEnter: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragExit: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragLeave: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragOver: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let dragStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let drop: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let durationChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let emptied: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let encrypted: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let ended: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let error: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let focus: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let focusIn: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let focusOut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let input: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let invalid: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let keyDown: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let keyPress: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let keyUp: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let load: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let loadStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let loadedData: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let loadedMetadata: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseDown: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseEnter: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseLeave: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseMove: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseOut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseOver: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let mouseUp: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let paste: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let pause: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let play: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let playing: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let progress: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let rateChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let scroll: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let seeked: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let seeking: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let select: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let stalled: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let submit: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let suspend: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let timeUpdate: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let touchCancel: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let touchEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let touchMove: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let touchStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let transitionEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let volumeChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let waiting: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+let wheel: (~eventInit: Js.t({..})=?, Dom.element) => unit;
diff --git a/test/melange-testing-library/dom/Queries.re b/test/melange-testing-library/dom/Queries.re
new file mode 100644
index 000000000..0c05fd206
--- /dev/null
+++ b/test/melange-testing-library/dom/Queries.re
@@ -0,0 +1,1126 @@
+module ByLabelTextQuery = {
+  type options = {
+    .
+    "selector": Js.undefined(string),
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~selector: string=?,
+      ~exact: bool=?,
+      ~normalizer: string => string=?,
+      unit
+    ) =>
+    options;
+};
+module ByPlaceholderTextQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByTextQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "selector": Js.undefined(string),
+    "ignore": Js.undefined(string),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~exact: bool=?,
+      ~selector: string=?,
+      ~ignore: string=?,
+      ~normalizer: string => string=?,
+      unit
+    ) =>
+    options;
+};
+module ByAltTextQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByTitleQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByDisplayValueQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+module ByRoleQuery = {
+  type options = {
+    .
+    "checked": Js.undefined(bool),
+    "collapseWhitespace": Js.undefined(bool),
+    "exact": Js.undefined(bool),
+    "hidden": Js.undefined(bool),
+    "level": Js.undefined(int),
+    "pressed": Js.undefined(bool),
+    "name": Js.undefined(string),
+    "normalizer": Js.undefined(string => string),
+    "queryFallbacks": Js.undefined(bool),
+    "selected": Js.undefined(bool),
+    "trim": Js.undefined(bool),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~checked: bool=?,
+      ~collapseWhitespace: bool=?,
+      ~exact: bool=?,
+      ~hidden: bool=?,
+      ~level: int=?,
+      ~pressed: bool=?,
+      ~name: string=?,
+      ~normalizer: string => string=?,
+      ~queryFallbacks: bool=?,
+      ~selected: bool=?,
+      ~trim: bool=?,
+      unit
+    ) =>
+    options;
+};
+module ByTestIdQuery = {
+  type options = {
+    .
+    "exact": Js.undefined(bool),
+    "normalizer": Js.undefined(string => string),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (~exact: bool=?, ~normalizer: string => string=?, unit) => options;
+};
+
+[@mel.module "@testing-library/dom"]
+external getNodeText: Dom.element => string = "getNodeText";
+
+/**
+ * ByLabelText
+ */
+[@mel.module "@testing-library/dom"]
+external _getByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByLabelText";
+
+let getByLabelText = (~matcher, ~options=?, element) =>
+  _getByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _getAllByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByLabelText";
+
+let getAllByLabelText = (~matcher, ~options=?, element) =>
+  _getAllByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByLabelText";
+
+let queryByLabelText = (~matcher, ~options=?, element) =>
+  _queryByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByLabelText";
+
+let queryAllByLabelText = (~matcher, ~options=?, element) =>
+  _queryAllByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByLabelText";
+
+let findByLabelText = (~matcher, ~options=?, element) =>
+  _findByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findAllByLabelText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByLabelText";
+
+let findAllByLabelText = (~matcher, ~options=?, element) =>
+  _findAllByLabelText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByPlaceholderText
+ */
+[@mel.module "@testing-library/dom"]
+external _getByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByPlaceholderText";
+
+let getByPlaceholderText = (~matcher, ~options=?, element) =>
+  _getByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _getAllByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByPlaceholderText";
+
+let getAllByPlaceholderText = (~matcher, ~options=?, element) =>
+  _getAllByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByPlaceholderText";
+
+let queryByPlaceholderText = (~matcher, ~options=?, element) =>
+  _queryByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByPlaceholderText";
+
+let queryAllByPlaceholderText = (~matcher, ~options=?, element) =>
+  _queryAllByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByPlaceholderText";
+
+let findByPlaceholderText = (~matcher, ~options=?, element) =>
+  _findByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findAllByPlaceholderText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByPlaceholderText";
+
+let findAllByPlaceholderText = (~matcher, ~options=?, element) =>
+  _findAllByPlaceholderText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByText
+ */
+[@mel.module "@testing-library/dom"]
+external _getByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByText";
+
+let getByText = (~matcher, ~options=?, element) =>
+  _getByText(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _getAllByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByText";
+
+let getAllByText = (~matcher, ~options=?, element) =>
+  _getAllByText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByText";
+
+let queryByText = (~matcher, ~options=?, element) =>
+  _queryByText(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByText";
+
+let queryAllByText = (~matcher, ~options=?, element) =>
+  _queryAllByText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByText";
+
+let findByText = (~matcher, ~options=?, element) =>
+  _findByText(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _findAllByText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Str(string)
+                | `RegExp(Js.Re.t)
+                | `Func((string, Dom.element) => bool)
+              ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByText";
+
+let findAllByText = (~matcher, ~options=?, element) =>
+  _findAllByText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByAltText
+ */
+[@mel.module "@testing-library/dom"]
+external _getByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByAltText";
+
+let getByAltText = (~matcher, ~options=?, element) =>
+  _getByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _getAllByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByAltText";
+
+let getAllByAltText = (~matcher, ~options=?, element) =>
+  _getAllByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByAltText";
+
+let queryByAltText = (~matcher, ~options=?, element) =>
+  _queryByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByAltText";
+
+let queryAllByAltText = (~matcher, ~options=?, element) =>
+  _queryAllByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByAltText";
+
+let findByAltText = (~matcher, ~options=?, element) =>
+  _findByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findAllByAltText:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByAltText";
+
+let findAllByAltText = (~matcher, ~options=?, element) =>
+  _findAllByAltText(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByTitle
+ */
+[@mel.module "@testing-library/dom"]
+external _getByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Dom.element =
+  "getByTitle";
+
+let getByTitle = (~matcher, ~options=?, element) =>
+  _getByTitle(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _getAllByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByTitle";
+
+let getAllByTitle = (~matcher, ~options=?, element) =>
+  _getAllByTitle(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByTitle";
+
+let queryByTitle = (~matcher, ~options=?, element) =>
+  _queryByTitle(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByTitle";
+
+let queryAllByTitle = (~matcher, ~options=?, element) =>
+  _queryAllByTitle(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByTitle";
+
+let findByTitle = (~matcher, ~options=?, element) =>
+  _findByTitle(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _findAllByTitle:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByTitle";
+
+let findAllByTitle = (~matcher, ~options=?, element) =>
+  _findAllByTitle(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByDisplayValue
+ */
+[@mel.module "@testing-library/dom"]
+external _getByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Dom.element =
+  "getByDisplayValue";
+
+let getByDisplayValue = (~matcher, ~options=?, element) =>
+  _getByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _getAllByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByDisplayValue";
+
+let getAllByDisplayValue = (~matcher, ~options=?, element) =>
+  _getAllByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByDisplayValue";
+
+let queryByDisplayValue = (~matcher, ~options=?, element) =>
+  _queryByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByDisplayValue";
+
+let queryAllByDisplayValue = (~matcher, ~options=?, element) =>
+  _queryAllByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByDisplayValue";
+
+let findByDisplayValue = (~matcher, ~options=?, element) =>
+  _findByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findAllByDisplayValue:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByDisplayValue";
+
+let findAllByDisplayValue = (~matcher, ~options=?, element) =>
+  _findAllByDisplayValue(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByRole
+ */
+[@mel.module "@testing-library/dom"]
+external _getByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Dom.element =
+  "getByRole";
+
+let getByRole = (~matcher, ~options=?, element) =>
+  _getByRole(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _getAllByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByRole";
+
+let getAllByRole = (~matcher, ~options=?, element) =>
+  _getAllByRole(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByRole";
+
+let queryByRole = (~matcher, ~options=?, element) =>
+  _queryByRole(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByRole";
+
+let queryAllByRole = (~matcher, ~options=?, element) =>
+  _queryAllByRole(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByRole";
+
+let findByRole = (~matcher, ~options=?, element) =>
+  _findByRole(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _findAllByRole:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByRole";
+
+let findAllByRole = (~matcher, ~options=?, element) =>
+  _findAllByRole(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+/**
+ * ByTestId
+ */
+[@mel.module "@testing-library/dom"]
+external _getByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Dom.element =
+  "getByTestId";
+
+let getByTestId = (~matcher, ~options=?, element) =>
+  _getByTestId(element, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _getAllByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByTestId";
+
+let getAllByTestId = (~matcher, ~options=?, element) =>
+  _getAllByTestId(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByTestId";
+
+let queryByTestId = (~matcher, ~options=?, element) =>
+  _queryByTestId(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _queryAllByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByTestId";
+
+let queryAllByTestId = (~matcher, ~options=?, element) =>
+  _queryAllByTestId(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByTestId";
+
+let findByTestId = (~matcher, ~options=?, element) =>
+  _findByTestId(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _findAllByTestId:
+  (
+    Dom.element,
+    ~matcher: [@mel.unwrap] [
+                | `Func((string, Dom.element) => bool)
+                | `RegExp(Js.Re.t)
+                | `Str(string)
+              ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByTestId";
+
+let findAllByTestId = (~matcher, ~options=?, element) =>
+  _findAllByTestId(
+    element,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
diff --git a/test/melange-testing-library/dom/Utils.re b/test/melange-testing-library/dom/Utils.re
new file mode 100644
index 000000000..5d6c999eb
--- /dev/null
+++ b/test/melange-testing-library/dom/Utils.re
@@ -0,0 +1,176 @@
+module MutationObserver = {
+  type options = {
+    .
+    "attributeFilter": Js.undefined(array(string)),
+    "attributeOldValue": Js.undefined(bool),
+    "attributes": Js.undefined(bool),
+    "characterData": Js.undefined(bool),
+    "characterDataOldValue": Js.undefined(bool),
+    "childList": Js.undefined(bool),
+    "subtree": Js.undefined(bool),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~attributeFilter: array(string)=?,
+      ~attributeOldValue: bool=?,
+      ~attributes: bool=?,
+      ~characterData: bool=?,
+      ~characterDataOldValue: bool=?,
+      ~childList: bool=?,
+      ~subtree: bool=?,
+      unit
+    ) =>
+    options;
+};
+
+module WaitFor = {
+  type options = {
+    .
+    "container": Js.undefined(Dom.element),
+    "interval": Js.undefined(int),
+    "mutationObserverOptions": Js.undefined(MutationObserver.options),
+    "onTimeout": Js.undefined(Js.Exn.t => Js.Exn.t),
+    "showOriginalStackTrace": Js.undefined(bool),
+    "stackTraceError": Js.undefined(Js.Exn.t),
+    "timeout": Js.undefined(int),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~container: Dom.element=?,
+      ~interval: int=?,
+      ~mutationObserverOptions: MutationObserver.options=?,
+      ~onTimeout: Js.Exn.t => Js.Exn.t=?,
+      ~showOriginalStackTrace: bool=?,
+      ~stackTraceError: Js.Exn.t=?,
+      ~timeout: int=?,
+      unit
+    ) =>
+    options;
+};
+
+module WaitForElement = {
+  type options = {
+    .
+    "container": Js.undefined(Dom.element),
+    "timeout": Js.undefined(int),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~container: Dom.element=?,
+      ~mutationObserverInit: MutationObserver.options=?,
+      ~timeout: int=?,
+      unit
+    ) =>
+    options;
+};
+
+[@mel.module "@testing-library/dom"]
+external _waitFor:
+  (unit => unit, Js.undefined(WaitFor.options)) => Js.Promise.t('a) =
+  "waitFor";
+
+let waitFor = (~callback, ~options=?, ()) =>
+  _waitFor(callback, Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _waitForPromise:
+  (unit => Js.Promise.t('a), Js.undefined(WaitFor.options)) =>
+  Js.Promise.t('b) =
+  "waitFor";
+
+let waitForPromise = (~callback, ~options=?, ()) =>
+  _waitForPromise(callback, Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _waitForElement:
+  (Js.undefined(unit => 'a), Js.undefined(WaitForElement.options)) =>
+  Js.Promise.t('a) =
+  "waitForElement";
+
+let waitForElement = (~callback=?, ~options=?, ()) =>
+  _waitForElement(
+    Js.Undefined.fromOption(callback),
+    Js.Undefined.fromOption(options),
+  );
+
+[@mel.module "@testing-library/dom"]
+external _waitForElementToBeRemoved:
+  (
+    ~callback: [@mel.unwrap] [ | `Func(unit => 'a) | `Value('a)],
+    Js.undefined(WaitFor.options)
+  ) =>
+  Js.Promise.t(unit) =
+  "waitForElementToBeRemoved";
+
+let waitForElementToBeRemoved = (~callback, ~options=?, ()) =>
+  _waitForElementToBeRemoved(~callback, Js.Undefined.fromOption(options));
+
+[@mel.module "@testing-library/dom"]
+external _prettyDOM: (Dom.element, Js.undefined(int)) => string = "prettyDOM";
+
+let prettyDOM = (~maxLength=?, element) =>
+  _prettyDOM(element, Js.Undefined.fromOption(maxLength));
+
+[@mel.module "@testing-library/dom"]
+external _logDOM: (Dom.element, Js.undefined(int)) => unit = "logDOM";
+
+let logDOM = (~maxLength=?, element) =>
+  _logDOM(element, Js.Undefined.fromOption(maxLength));
+
+module Configure = {
+  type options = {
+    .
+    "_disableExpensiveErrorDiagnostics": Js.undefined(bool),
+    "asyncUtilTimeout": Js.undefined(int),
+    "asyncWrapper": Js.undefined(unit => unit),
+    "computedStyleSupportsPseudoElements": Js.undefined(bool),
+    "defaultHidden": Js.undefined(bool),
+    "eventWrapper": Js.undefined(unit => unit),
+    "getElementError": Js.undefined((string, Dom.element) => Js.Exn.t),
+    "showOriginalStackTrace": Js.undefined(bool),
+    "testIdAttribute": Js.undefined(string),
+    "throwSuggestions": Js.undefined(bool),
+  };
+
+  [@mel.obj]
+  external makeOptions:
+    (
+      ~_disableExpensiveErrorDiagnostics: bool=?,
+      ~asyncUtilTimeout: int=?,
+      ~asyncWrapper: unit => unit=?,
+      ~computedStyleSupportsPseudoElements: bool=?,
+      ~defaultHidden: bool=?,
+      ~eventWrapper: unit => unit=?,
+      ~getElementError: (string, Dom.element) => Js.Exn.t=?,
+      ~showOriginalStackTrace: bool=?,
+      ~testIdAttribute: string=?,
+      ~throwSuggestions: bool=?,
+      unit
+    ) =>
+    options;
+};
+
+[@mel.module "@testing-library/dom"]
+external configureWithFn: (Js.t({..}) => Js.t({..})) => unit = "configure";
+
+[@mel.module "@testing-library/dom"]
+external configureWithObject: Configure.options => unit = "configure";
+
+let configure =
+    (
+      ~update: [
+         | `Func(Configure.options => Configure.options)
+         | `Object(Configure.options)
+       ],
+    ) => {
+  switch (update) {
+  | `Func(fn) => configureWithFn(fn)
+  | `Object(obj) => configureWithObject(obj)
+  };
+};
diff --git a/test/melange-testing-library/dom/dune b/test/melange-testing-library/dom/dune
new file mode 100644
index 000000000..8ae145e24
--- /dev/null
+++ b/test/melange-testing-library/dom/dune
@@ -0,0 +1,7 @@
+(library
+ (name melange_testing_library_dom)
+ (wrapped false)
+ (modes melange)
+ (libraries melange.dom)
+ (preprocess
+  (pps melange.ppx)))
diff --git a/test/melange-testing-library/react/ReactTestingLibrary.re b/test/melange-testing-library/react/ReactTestingLibrary.re
new file mode 100644
index 000000000..879157830
--- /dev/null
+++ b/test/melange-testing-library/react/ReactTestingLibrary.re
@@ -0,0 +1,1044 @@
+open DomTestingLibrary;
+
+module FireEvent = FireEvent;
+
+type renderResult;
+type queries;
+type renderOptions = {
+  .
+  "container": Js.undefined(Dom.element),
+  "baseElement": Js.undefined(Dom.element),
+  "hydrate": Js.undefined(bool),
+  "wrapper": Js.undefined(Dom.element),
+  "queries": Js.undefined(queries),
+};
+
+[@mel.module "@testing-library/react"]
+external cleanup: unit => unit = "cleanup";
+
+[@mel.module "@testing-library/react"]
+external actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit) = "act";
+
+[@mel.module "@testing-library/react"]
+external _act: (unit => Js.undefined(Js.Promise.t('a))) => unit = "act";
+
+let act = callback =>
+  _act(() => {
+    callback();
+    // (work-around) BuckleScript compiles `unit` to `0`, this will cause a warning as following:
+    // Warning: The callback passed to act(...) function must return undefined, or a Promise.
+    Js.Undefined.empty;
+  });
+
+[@mel.module "@testing-library/react"]
+external _render: (React.element, renderOptions) => renderResult = "render";
+
+[@mel.get] external container: renderResult => Dom.element = "container";
+
+[@mel.get] external baseElement: renderResult => Dom.element = "baseElement";
+
+[@mel.send.pipe: renderResult]
+external _debug: (Js.undefined(Dom.element), Js.undefined(int)) => unit =
+  "debug";
+
+[@mel.send.pipe: renderResult] external unmount: unit => bool = "unmount";
+
+[@mel.send.pipe: renderResult]
+external rerender: React.element => unit = "rerender";
+
+[@mel.send.pipe: renderResult]
+external asFragment: unit => Dom.element = "asFragment";
+
+// ByLabelText
+[@mel.send.pipe: renderResult]
+external _getByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByLabelText";
+
+let getByLabelText = (~matcher, ~options=?, result) =>
+  _getByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _getAllByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByLabelText";
+
+let getAllByLabelText = (~matcher, ~options=?, result) =>
+  _getAllByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByLabelText";
+
+let queryByLabelText = (~matcher, ~options=?, result) =>
+  _queryByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryAllByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByLabelText";
+
+let queryAllByLabelText = (~matcher, ~options=?, result) =>
+  _queryAllByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByLabelText";
+
+let findByLabelText = (~matcher, ~options=?, result) =>
+  _findByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findAllByLabelText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByLabelTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByLabelText";
+
+let findAllByLabelText = (~matcher, ~options=?, result) =>
+  _findAllByLabelText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByPlaceholderText
+[@mel.send.pipe: renderResult]
+external _getByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByPlaceholderText";
+
+let getByPlaceholderText = (~matcher, ~options=?, result) =>
+  _getByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _getAllByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByPlaceholderText";
+
+let getAllByPlaceholderText = (~matcher, ~options=?, result) =>
+  _getAllByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByPlaceholderText";
+
+let queryByPlaceholderText = (~matcher, ~options=?, result) =>
+  _queryByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryAllByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByPlaceholderText";
+
+let queryAllByPlaceholderText = (~matcher, ~options=?, result) =>
+  _queryAllByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByPlaceholderText";
+
+let findByPlaceholderText = (~matcher, ~options=?, result) =>
+  _findByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findAllByPlaceholderText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByPlaceholderTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByPlaceholderText";
+
+let findAllByPlaceholderText = (~matcher, ~options=?, result) =>
+  _findAllByPlaceholderText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByText
+[@mel.send.pipe: renderResult]
+external _getByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByText";
+
+let getByText = (~matcher, ~options=?, result) =>
+  _getByText(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _getAllByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByText";
+
+let getAllByText = (~matcher, ~options=?, result) =>
+  _getAllByText(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _queryByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByText";
+
+let queryByText = (~matcher, ~options=?, result) =>
+  _queryByText(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _queryAllByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByText";
+
+let queryAllByText = (~matcher, ~options=?, result) =>
+  _queryAllByText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByText";
+
+let findByText = (~matcher, ~options=?, result) =>
+  _findByText(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _findAllByText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByText";
+
+let findAllByText = (~matcher, ~options=?, result) =>
+  _findAllByText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByAltText
+[@mel.send.pipe: renderResult]
+external _getByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Dom.element =
+  "getByAltText";
+
+let getByAltText = (~matcher, ~options=?, result) =>
+  _getByAltText(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _getAllByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByAltText";
+
+let getAllByAltText = (~matcher, ~options=?, result) =>
+  _getAllByAltText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByAltText";
+
+let queryByAltText = (~matcher, ~options=?, result) =>
+  _queryByAltText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryAllByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByAltText";
+
+let queryAllByAltText = (~matcher, ~options=?, result) =>
+  _queryAllByAltText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByAltText";
+
+let findByAltText = (~matcher, ~options=?, result) =>
+  _findByAltText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findAllByAltText:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByAltTextQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByAltText";
+
+let findAllByAltText = (~matcher, ~options=?, result) =>
+  _findAllByAltText(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByTitle
+[@mel.send.pipe: renderResult]
+external _getByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Dom.element =
+  "getByTitle";
+
+let getByTitle = (~matcher, ~options=?, result) =>
+  _getByTitle(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _getAllByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByTitle";
+
+let getAllByTitle = (~matcher, ~options=?, result) =>
+  _getAllByTitle(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByTitle";
+
+let queryByTitle = (~matcher, ~options=?, result) =>
+  _queryByTitle(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _queryAllByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByTitle";
+
+let queryAllByTitle = (~matcher, ~options=?, result) =>
+  _queryAllByTitle(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByTitle";
+
+let findByTitle = (~matcher, ~options=?, result) =>
+  _findByTitle(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _findAllByTitle:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTitleQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByTitle";
+
+let findAllByTitle = (~matcher, ~options=?, result) =>
+  _findAllByTitle(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByDisplayValue
+[@mel.send.pipe: renderResult]
+external _getByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Dom.element =
+  "getByDisplayValue";
+
+let getByDisplayValue = (~matcher, ~options=?, result) =>
+  _getByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _getAllByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByDisplayValue";
+
+let getAllByDisplayValue = (~matcher, ~options=?, result) =>
+  _getAllByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByDisplayValue";
+
+let queryByDisplayValue = (~matcher, ~options=?, result) =>
+  _queryByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryAllByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByDisplayValue";
+
+let queryAllByDisplayValue = (~matcher, ~options=?, result) =>
+  _queryAllByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByDisplayValue";
+
+let findByDisplayValue = (~matcher, ~options=?, result) =>
+  _findByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findAllByDisplayValue:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByDisplayValueQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByDisplayValue";
+
+let findAllByDisplayValue = (~matcher, ~options=?, result) =>
+  _findAllByDisplayValue(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByRole
+[@mel.send.pipe: renderResult]
+external _getByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Dom.element =
+  "getByRole";
+
+let getByRole = (~matcher, ~options=?, result) =>
+  _getByRole(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _getAllByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByRole";
+
+let getAllByRole = (~matcher, ~options=?, result) =>
+  _getAllByRole(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _queryByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByRole";
+
+let queryByRole = (~matcher, ~options=?, result) =>
+  _queryByRole(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _queryAllByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByRole";
+
+let queryAllByRole = (~matcher, ~options=?, result) =>
+  _queryAllByRole(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByRole";
+
+let findByRole = (~matcher, ~options=?, result) =>
+  _findByRole(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _findAllByRole:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByRoleQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByRole";
+
+let findAllByRole = (~matcher, ~options=?, result) =>
+  _findAllByRole(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+// ByTestId
+[@mel.send.pipe: renderResult]
+external _getByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Dom.element =
+  "getByTestId";
+
+let getByTestId = (~matcher, ~options=?, result) =>
+  _getByTestId(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _getAllByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  array(Dom.element) =
+  "getAllByTestId";
+
+let getAllByTestId = (~matcher, ~options=?, result) =>
+  _getAllByTestId(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.null(Dom.element) =
+  "queryByTestId";
+
+let queryByTestId = (~matcher, ~options=?, result) =>
+  _queryByTestId(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _queryAllByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  array(Dom.element) =
+  "queryAllByTestId";
+
+let queryAllByTestId = (~matcher, ~options=?, result) =>
+  _queryAllByTestId(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+[@mel.send.pipe: renderResult]
+external _findByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.Promise.t(Dom.element) =
+  "findByTestId";
+
+let findByTestId = (~matcher, ~options=?, result) =>
+  _findByTestId(result, ~matcher, ~options=Js.Undefined.fromOption(options));
+
+[@mel.send.pipe: renderResult]
+external _findAllByTestId:
+  (
+    ~matcher:
+      [@mel.unwrap] [
+        | `Str(string)
+        | `RegExp(Js.Re.t)
+        | `Func((string, Dom.element) => bool)
+      ],
+    ~options: Js.undefined(ByTestIdQuery.options)
+  ) =>
+  Js.Promise.t(array(Dom.element)) =
+  "findAllByTestId";
+
+let findAllByTestId = (~matcher, ~options=?, result) =>
+  _findAllByTestId(
+    result,
+    ~matcher,
+    ~options=Js.Undefined.fromOption(options),
+  );
+
+let render =
+    (
+      ~baseElement=?,
+      ~container=?,
+      ~hydrate=?,
+      ~wrapper=?,
+      ~queries=?,
+      element,
+    ) => {
+  let baseElement_ =
+    switch (container) {
+    | Some(container') => Js.Undefined.return(container')
+    | None => Js.Undefined.fromOption(baseElement)
+    };
+  let container_ = Js.Undefined.fromOption(container);
+
+  _render(
+    element,
+    {
+      "baseElement": baseElement_,
+      "container": container_,
+      "hydrate": Js.Undefined.fromOption(hydrate),
+      "wrapper": Js.Undefined.fromOption(wrapper),
+      "queries": Js.Undefined.fromOption(queries),
+    },
+  );
+};
+
+let debug = (~el=?, ~maxLengthToPrint=?) =>
+  _debug(
+    Js.Undefined.fromOption(el),
+    Js.Undefined.fromOption(maxLengthToPrint),
+  );
diff --git a/test/melange-testing-library/react/ReactTestingLibrary.rei b/test/melange-testing-library/react/ReactTestingLibrary.rei
new file mode 100644
index 000000000..e2608f7e5
--- /dev/null
+++ b/test/melange-testing-library/react/ReactTestingLibrary.rei
@@ -0,0 +1,702 @@
+module FireEvent: {
+  let abort: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let animationEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let animationIteration: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let animationStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let blur: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let canPlay: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let canPlayThrough: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let change: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let click: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let compositionEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let compositionStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let compositionUpdate: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let contextMenu: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let copy: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let cut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dblClick: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let doubleClick: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let drag: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragEnter: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragExit: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragLeave: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragOver: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let dragStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let drop: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let durationChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let emptied: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let encrypted: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let ended: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let error: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let focus: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let focusIn: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let focusOut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let input: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let invalid: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let keyDown: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let keyPress: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let keyUp: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let load: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let loadStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let loadedData: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let loadedMetadata: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseDown: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseEnter: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseLeave: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseMove: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseOut: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseOver: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let mouseUp: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let paste: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let pause: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let play: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let playing: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let progress: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let rateChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let scroll: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let seeked: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let seeking: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let select: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let stalled: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let submit: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let suspend: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let timeUpdate: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let touchCancel: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let touchEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let touchMove: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let touchStart: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let transitionEnd: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let volumeChange: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let waiting: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+  let wheel: (~eventInit: Js.t({..})=?, Dom.element) => unit;
+};
+
+type renderResult;
+type queries;
+type renderOptions = {
+  .
+  "container": Js.undefined(Dom.element),
+  "baseElement": Js.undefined(Dom.element),
+  "hydrate": Js.undefined(bool),
+  "wrapper": Js.undefined(Dom.element),
+  "queries": Js.undefined(queries),
+};
+
+[@mel.module "@testing-library/react"]
+external cleanup: unit => unit = "cleanup";
+
+[@mel.module "@testing-library/react"]
+external actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit) = "act";
+
+let act: (unit => unit) => unit;
+
+[@mel.get] external container: renderResult => Dom.element = "container";
+
+[@mel.get] external baseElement: renderResult => Dom.element = "baseElement";
+
+[@mel.send.pipe: renderResult] external unmount: unit => bool = "unmount";
+
+[@mel.send.pipe: renderResult]
+external asFragment: unit => Dom.element = "asFragment";
+
+// ByLabelText
+let getByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByLabelText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByLabelTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByPlaceholderText
+let getByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByPlaceholderText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByPlaceholderTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByText
+let getByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByAltText
+let getByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByAltText:
+  (
+    ~matcher: [
+      | `Func((string, Dom.element) => bool)
+      | `RegExp(Js.Re.t)
+      | `Str(string)
+    ],
+    ~options: DomTestingLibrary.ByAltTextQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByTitle
+let getByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByTitle:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTitleQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByDisplayValue
+let getByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByDisplayValue:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByDisplayValueQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByRole
+let getByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByRole:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByRoleQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+// ByTestId
+let getByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  Dom.element;
+
+let getAllByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let queryByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  Js.null(Dom.element);
+
+let queryAllByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  array(Dom.element);
+
+let findByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(Dom.element);
+
+let findAllByTestId:
+  (
+    ~matcher: [
+      | `Str(string)
+      | `RegExp(Js.Re.t)
+      | `Func((string, Dom.element) => bool)
+    ],
+    ~options: DomTestingLibrary.ByTestIdQuery.options=?,
+    renderResult
+  ) =>
+  Js.Promise.t(array(Dom.element));
+
+[@mel.send.pipe: renderResult]
+external rerender: React.element => unit = "rerender";
+
+let render:
+  (
+    ~baseElement: Dom.element=?,
+    ~container: Dom.element=?,
+    ~hydrate: bool=?,
+    ~wrapper: Dom.element=?,
+    ~queries: queries=?,
+    React.element
+  ) =>
+  renderResult;
+
+let debug:
+  (~el: Dom.element=?, ~maxLengthToPrint: int=?, renderResult) => unit;
diff --git a/test/melange-testing-library/react/dune b/test/melange-testing-library/react/dune
new file mode 100644
index 000000000..ecc0a0ab4
--- /dev/null
+++ b/test/melange-testing-library/react/dune
@@ -0,0 +1,7 @@
+(library
+ (name melange_testing_library_react)
+ (libraries reason-react melange_testing_library_dom)
+ (wrapped false)
+ (modes melange)
+ (preprocess
+  (pps melange.ppx)))

From 4434bfd27d765a7734d26db18a5f0f9fb4894f42 Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Mon, 18 Nov 2024 20:53:10 +0100
Subject: [PATCH 4/5] Fix Form__test with RTL

---
 package-lock.json  |  94 +++++++---------------------------
 package.json       |   5 +-
 test/Form__test.re | 122 ++++++++++++++++++++++++---------------------
 test/dune          |   4 +-
 test/jest/Jest.re  |  19 +++++++
 5 files changed, 107 insertions(+), 137 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b11818400..5a2861815 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,8 @@
       },
       "devDependencies": {
         "jest": "^26.0.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-test-renderer": "^18.2.0"
+        "react": "19.0.0-rc.1",
+        "react-dom": "19.0.0-rc.1"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -3802,17 +3801,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4143,15 +4131,6 @@
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
       "dev": true
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/object-copy": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
@@ -4516,66 +4495,37 @@
       "dev": true
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
+      "version": "19.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc.1.tgz",
+      "integrity": "sha512-NZKln+uyPuyHchzP07I6GGYFxdAoaKhehgpCa3ltJGzwE31OYumLeshGaitA1R/fS5d9D2qpZVwTFAr6zCLM9w==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "19.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc.1.tgz",
+      "integrity": "sha512-k8MfDX+4G+eaa1cXXI9QF4d+pQtYol3nx8vauqRWUEOPqC7NQn2qmEqUsLoSd28rrZUL+R3T2VC+kZ2Hyx1geQ==",
+      "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "0.25.0-rc.1"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "19.0.0-rc.1"
       }
     },
+    "node_modules/react-dom/node_modules/scheduler": {
+      "version": "0.25.0-rc.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc.1.tgz",
+      "integrity": "sha512-fVinv2lXqYpKConAMdergOl5owd0rY1O4P/QTe0aWKCqGtu7VsCt1iqQFxSJtqK4Lci/upVSBpGwVC7eWcuS9Q==",
+      "license": "MIT"
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-shallow-renderer": {
-      "version": "16.15.0",
-      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
-      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/react-test-renderer": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz",
-      "integrity": "sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==",
-      "dev": true,
-      "dependencies": {
-        "react-is": "^18.2.0",
-        "react-shallow-renderer": "^16.15.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/react-test-renderer/node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -5089,14 +5039,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 6020ed48a..a9bd27f37 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,8 @@
   "homepage": "https://reasonml.github.io/reason-react/",
   "devDependencies": {
     "jest": "^26.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0"
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1"
   },
   "jest": {
     "moduleDirectories": [
diff --git a/test/Form__test.re b/test/Form__test.re
index 85593047b..2ea26d9c4 100644
--- a/test/Form__test.re
+++ b/test/Form__test.re
@@ -1,7 +1,4 @@
 open Jest;
-open Jest.Expect;
-open ReactDOMTestUtils;
-open Belt;
 
 module FormData = React.Experimental.FormData;
 
@@ -25,7 +22,11 @@ module Thread = {
     let (optimisticMessages, addOptimisticMessage) =
       React.Experimental.useOptimistic(messages, (state, newMessage) =>
         [
-          {text: newMessage, sending: true, key: List.length(state) + 1},
+          {
+            text: newMessage,
+            sending: true,
+            key: List.length(state) + 1,
+          },
           ...state,
         ]
       );
@@ -49,24 +50,26 @@ module Thread = {
       };
     };
     <>
-      {{
-         optimisticMessages->Belt.List.map(message =>
-           <div key={Int.toString(message.key)}>
-             {React.string(message.text)}
-             {message.sending
-                ? React.null
-                : <small> {React.string("(Enviando...)")} </small>}
-           </div>
-         );
-       }
-       ->Belt.List.toArray
-       ->React.array}
+      <div id="messages">
+        {{
+           optimisticMessages->Belt.List.map(message =>
+             <span key={Belt.Int.toString(message.key)}>
+               {React.string(message.text)}
+               {message.sending
+                  ? React.null
+                  : <small> {React.string("(Enviando...)")} </small>}
+             </span>
+           );
+         }
+         ->Belt.List.toArray
+         ->React.array}
+      </div>
       {React.cloneElement(
          ReactDOM.createElement(
            "form",
            ~props=ReactDOM.domProps(~ref=ReactDOM.Ref.domRef(formRef), ()),
            [|
-             <input type_="text" name="message" placeholder="Hola!" />,
+             <input type_="text" name="message" placeholder="message" />,
              <button type_="submit"> {React.string("Enviar")} </button>,
            |],
          ),
@@ -84,7 +87,15 @@ module App = {
   [@react.component]
   let make = () => {
     let (messages, setMessages) =
-      React.useState(() => [{text: "¡Hola!", sending: false, key: 1}]);
+      React.useState(() =>
+        [
+          {
+            text: "Hola!",
+            sending: false,
+            key: 1,
+          },
+        ]
+      );
 
     let sendMessage = formData => {
       let formMessage = FormData.get("message", formData);
@@ -95,7 +106,14 @@ module App = {
         | JSString(text) =>
           let _ =
             setMessages(messages =>
-              [{text, sending: true, key: 1}, ...messages]
+              [
+                {
+                  text,
+                  sending: true,
+                  key: 1,
+                },
+                ...messages,
+              ]
             );
           Js.Promise.resolve();
         | _ => Js.Promise.resolve()
@@ -108,46 +126,38 @@ module App = {
   };
 };
 
-describe("Form with useOptimistic", () => {
-  let container = ref(None);
-
-  beforeEach(prepareContainer(container));
-  afterEach(cleanupContainer(container));
-
-  test("should render the form", () => {
-    let container = getContainer(container);
-    let root = ReactDOM.Client.createRoot(container);
+let (let.await) = (p, f) => Js.Promise.then_(f, p);
+let (let.catch) = (p, f) => Js.Promise.then_(f, p);
 
-    act(() => ReactDOM.Client.render(root, <App />));
+let findByString = (text, container) =>
+  ReactTestingLibrary.findByText(~matcher=`Str(text), container);
 
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "0")
-      ->Option.isSome,
-    )
-    ->toBe(true);
+let findByPlaceholderText = (text, container) =>
+  ReactTestingLibrary.findByPlaceholderText(~matcher=`Str(text), container);
 
-    let button = container->DOM.findBySelector("button");
+describe("Form with useOptimistic", () => {
+  testPromise("should render the form", finish => {
+    let container = ReactTestingLibrary.render(<App />);
+
+    ReactTestingLibrary.actAsync(() => {
+      let.await _ = findByString("Hola!", container);
+
+      let.await button = findByString("Enviar", container);
+      let.await input = findByPlaceholderText("message", container);
+
+      FireEvent.change(
+        input,
+        ~eventInit={
+          "target": {
+            "value": "Let's go!",
+          },
+        },
+      );
 
-    act(() => {
-      switch (button) {
-      | Some(button) => Simulate.click(button)
-      | None => ()
-      }
+      FireEvent.click(button);
+      let.await _newMessage = findByString("Let's go!", container);
+      /* If the promise resolve, means the node is found in the DOM */
+      finish();
     });
-
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "0")
-      ->Option.isSome,
-    )
-    ->toBe(false);
-
-    expect(
-      container
-      ->DOM.findBySelectorAndTextContent("button", "1")
-      ->Option.isSome,
-    )
-    ->toBe(true);
-  });
+  })
 });
diff --git a/test/dune b/test/dune
index fd66b7258..c444622f1 100644
--- a/test/dune
+++ b/test/dune
@@ -8,7 +8,7 @@
   reason-react.node
   jest
   melange.belt
-  melange-testing-library.dom
-  melange-testing-library.react)
+  melange_testing_library_dom
+  melange_testing_library_react)
  (preprocess
   (pps melange.ppx reason-react-ppx)))
diff --git a/test/jest/Jest.re b/test/jest/Jest.re
index 3c9a6bc5f..fa3a29742 100644
--- a/test/jest/Jest.re
+++ b/test/jest/Jest.re
@@ -22,6 +22,25 @@ let testAsync: (~timeout: int=?, string, (unit => unit) => unit) => unit =
   (~timeout=?, name, f) =>
     testAsyncU(name, callback => f(callback), timeout);
 
+external testPromiseU:
+  (
+    string,
+    (unit => Js.Promise.t(unit)) => Js.Promise.t(unit),
+    option(int)
+  ) =>
+  unit =
+  "test";
+
+let testPromise:
+  (
+    ~timeout: int=?,
+    string,
+    (unit => Js.Promise.t(unit)) => Js.Promise.t(unit)
+  ) =>
+  unit =
+  (~timeout=?, name, f) =>
+    testPromiseU(name, callback => f(callback), timeout);
+
 module Only = {
   [@mel.scope "describe"]
   external describeU: (string, (. unit) => unit) => unit = "only";

From e34a038a754b3aeacdb5a45dce90341243f33436 Mon Sep 17 00:00:00 2001
From: David Sancho Moreno <dsnxmoreno@gmail.com>
Date: Tue, 19 Nov 2024 11:37:48 +0100
Subject: [PATCH 5/5] Turn useState initializer as a uncurried fn

---
 src/React.re  | 3 ++-
 src/React.rei | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/React.re b/src/React.re
index ba02b4222..e17931519 100644
--- a/src/React.re
+++ b/src/React.re
@@ -479,7 +479,8 @@ type callbackAsync('input, 'output) = 'input => Js.Promise.t('output);
  */
 [@mel.module "react"]
 external useState:
-  ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
+  ([@mel.uncurry] (unit => 'state)) =>
+  ('state, (. ('state => 'state)) => unit) =
   "useState";
 
 [@mel.module "react"]
diff --git a/src/React.rei b/src/React.rei
index 372337618..2fac4bd03 100644
--- a/src/React.rei
+++ b/src/React.rei
@@ -167,7 +167,8 @@ module Suspense: {
  */
 [@mel.module "react"]
 external useState:
-  ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
+  ([@mel.uncurry] (unit => 'state)) =>
+  ('state, (. ('state => 'state)) => unit) =
   "useState";
 
 [@mel.module "react"]