diff --git a/packages/examples/packages/preinstalled/src/index.test.ts b/packages/examples/packages/preinstalled/src/index.test.ts
deleted file mode 100644
index 860d6c4b6c..0000000000
--- a/packages/examples/packages/preinstalled/src/index.test.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { expect } from '@jest/globals';
-import { installSnap } from '@metamask/snaps-jest';
-
-describe('onRpcRequest', () => {
- it('throws an error if the requested method does not exist', async () => {
- const { request } = await installSnap();
-
- const response = await request({
- method: 'foo',
- });
-
- expect(response).toRespondWithError({
- code: -32601,
- message: 'The method does not exist / is not available.',
- stack: expect.any(String),
- data: {
- method: 'foo',
- cause: null,
- },
- });
- });
-});
diff --git a/packages/examples/packages/preinstalled/src/index.test.tsx b/packages/examples/packages/preinstalled/src/index.test.tsx
new file mode 100644
index 0000000000..4fe235d886
--- /dev/null
+++ b/packages/examples/packages/preinstalled/src/index.test.tsx
@@ -0,0 +1,64 @@
+import { expect } from '@jest/globals';
+import { installSnap } from '@metamask/snaps-jest';
+
+import { Dialog, Result } from './components';
+
+describe('onRpcRequest', () => {
+ it('throws an error if the requested method does not exist', async () => {
+ const { request } = await installSnap();
+
+ const response = await request({
+ method: 'foo',
+ });
+
+ expect(response).toRespondWithError({
+ code: -32601,
+ message: 'The method does not exist / is not available.',
+ stack: expect.any(String),
+ data: {
+ method: 'foo',
+ cause: null,
+ },
+ });
+ });
+
+ describe('showDialog', () => {
+ it('closes the dialog when clicking cancel, and resolves with `null`', async () => {
+ const { request } = await installSnap();
+
+ const response = request({
+ method: 'showDialog',
+ });
+
+ const formScreen = await response.getInterface();
+ expect(formScreen).toRender();
+
+ await formScreen.clickElement('cancel');
+
+ const result = await response;
+ expect(result).toRespondWith(null);
+ });
+
+ it('shows the result when clicking confirm, and resolves with the result', async () => {
+ const { request } = await installSnap();
+
+ const response = request({
+ method: 'showDialog',
+ });
+
+ const formScreen = await response.getInterface();
+ expect(formScreen).toRender();
+
+ await formScreen.typeInField('custom-input', 'foo bar');
+ await formScreen.clickElement('confirm');
+
+ const resultScreen = await response.getInterface();
+ expect(resultScreen).toRender();
+
+ await resultScreen.clickElement('ok');
+
+ const result = await response;
+ expect(result).toRespondWith('foo bar');
+ });
+ });
+});