[RFC] Add vitest integration for package unit testing #6089

alexvcasillas · 2025-02-07T12:30:15Z

Note

RFC
We would like to discuss if there's actually a need to introduce Vitest to have another testing step along with Cypress or if with Cypress would be enough

This pull request introduces several changes to the project, primarily focusing on adding unit testing capabilities using Vitest, updating dependencies, and configuring the testing environment. The most important changes are summarized below:

Testing Enhancements:

Added new unit test scripts using Vitest in package.json and packages/extension-bold/package.json. [1] [2]
Created a new test configuration file vitest.config.ts to set up the testing environment with JSDOM and alias resolutions.
Added a specific Vitest configuration file for the extension-bold package to include JSDOM environment setup and alias resolutions.

Dependency Updates:

Added jsdom and vitest as new dependencies in package.json and packages/extension-bold/package.json. [1] [2] [3]

New Tests:

Added a new test file bold.spec.ts for the extension-bold package to test the initialization and commands of the Bold extension.
Created a corresponding HTML file test.dom.html to serve as the test document for the Bold extension tests.

changeset-bot · 2025-02-07T12:30:19Z

⚠️ No Changeset found

Latest commit: 8b18843

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-02-07T12:30:38Z

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	`8b18843`
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/67a606cf9705fd0008c26334
😎 Deploy Preview	https://deploy-preview-6089--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bdbch · 2025-02-07T12:31:54Z

Should this only live on extension-bold? I guess every extension would have it's own test run which we can run through with turbo?

alexvcasillas · 2025-02-07T12:32:02Z

vitest.config.ts

+  },
+  resolve: {
+    alias: {
+      '@tiptap/extension-bold': path.join(__dirname, 'packages/extension-bold/src'),


The alias resolution is needed so the Vitest runner knows how to resolve the @tiptap/extension-bold, @tiptap/extension-document, and other import aliases correctly

Seems verbose, I'd have thought there was a way to resolve using a tsconfig

… needed

alexvcasillas · 2025-02-07T12:34:27Z

packages/extension-bold/test.dom.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>


Since we rely on JSOM to mount an in-memory DOM so we can bind the Editor to an HTMLElement this file is needed as it serves JSDOM for the initial DOM structure

alexvcasillas · 2025-02-07T12:35:07Z

packages/extension-bold/src/bold.spec.ts

+
+describe('Bold Extension', () => {
+  beforeAll(async () => {
+    dom = await JSDOM.fromFile(path.resolve(__dirname, '..', 'test.dom.html'), {


JSDOM initialization, maybe this can be extracted into a separate utility

alexvcasillas · 2025-02-07T12:35:41Z

packages/extension-bold/src/bold.spec.ts

+        extension => extension.name === 'bold',
+      )
+
+      expect(boldExtension).toBeTruthy()


You can test for an extension's presence within the editor

alexvcasillas · 2025-02-07T12:36:02Z

packages/extension-bold/src/bold.spec.ts

+        extensions: [Document, Paragraph, Text, Bold],
+      })
+
+      expect(editor.commands.setBold).toBeDefined()


You can test that commands inserted by extensions are present in the editor

alexvcasillas · 2025-02-07T12:36:58Z

packages/extension-bold/src/bold.spec.ts

+
+      editor.commands.setBold()
+
+      expect(editor.getText()).toContain('Example Text')


This is very naive, but we could get the specific node from the editor and check for it's textStyle here, or their marks to check that the bold mark is actually being applied

pkg-pr-new · 2025-02-07T12:38:17Z

Open in Stackblitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@6089

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@6089

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@6089

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@6089

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@6089

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@6089

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@6089

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@6089

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@6089

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@6089

@tiptap/extension-collaboration-cursor

npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@6089

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@6089

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@6089

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@6089

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@6089

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@6089

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@6089

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@6089

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@6089

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@6089

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@6089

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@6089

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@6089

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@6089

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@6089

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@6089

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@6089

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@6089

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@6089

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@6089

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@6089

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@6089

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@6089

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@6089

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@6089

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@6089

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@6089

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@6089

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@6089

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@6089

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@6089

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@6089

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@6089

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@6089

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@6089

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@6089

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@6089

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@6089

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@6089

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@6089

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@6089

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@6089

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@6089

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@6089

commit: 8b18843

alexvcasillas · 2025-02-07T12:39:20Z

Should this only live on extension-bold? I guess every extension would have it's own test run which we can run through with turbo?

As this is more like the initial state of the Vitest setup I wanted to make sure that it works fine with one extension and now we could build up from there to have it in all extensions, either way, there's no need from turbo unless required, since running npm run test:unit in the root, will run all of the unit tests in the packages folder.

…lready depends on build

nperez0111 · 2025-02-11T07:25:16Z

packages/extension-bold/package.json

+    "jsdom": "^26.0.0",
+    "vitest": "^3.0.5"


I'd not make this a dev dep of the package. It should only be for testing & having it in the root should be enough

nperez0111

This PR should have been done on the next branch since that will be the next major version. v2 should be in maintenance only mode right now

nperez0111 · 2025-02-11T07:28:24Z

packages/extension-bold/src/bold.spec.ts

I'm not sure about this, the sorts of tests that you can assert here are not anything that cannot be exercised by cypress in an e2e fashion.

E2E sort of is the best approach for editor testing because it exercises actual paths people would interface with rather than just that commands exist or not

nperez0111 · 2025-02-11T07:29:36Z

vitest.config.ts

+  },
+  resolve: {
+    alias: {
+      '@tiptap/extension-bold': path.join(__dirname, 'packages/extension-bold/src'),


Seems verbose, I'd have thought there was a way to resolve using a tsconfig

nperez0111 · 2025-02-11T07:30:17Z

turbo.json

@@ -14,6 +14,10 @@
    "dev": {
      "persistent": true,
      "cache": false
+    },
+    "test": {
+      "dependsOn": ["^build"],


Does it depend on build? based on your path resolution it is using the source files & not the built files

nperez0111

Sorry meant to reject

Alex Casillas added 2 commits February 7, 2025 13:24

Add vitest integration for package unit testing

e5cccef

chore: revert .vscode/settings.json changes

3fc2282

alexvcasillas added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Type: Enhancement The issue or pullrequest is an enhancement to an existing feature dependencies Pull requests that update a dependency file labels Feb 7, 2025

alexvcasillas self-assigned this Feb 7, 2025

alexvcasillas commented Feb 7, 2025

View reviewed changes

chore: remove resolve aliases in the package vitest config as its not…

db4c725

… needed

alexvcasillas commented Feb 7, 2025

View reviewed changes

Alex Casillas added 6 commits February 7, 2025 13:42

chore: add unit test workflow

2ba7dda

chore: add missing build step to unit test workflow

ac9d55f

Merge develop

49b1a7f

chore: move to turbo instead of calling vitest directly

6e53aba

fix: properly use the npm run test:unit command

e311e88

chore: add cache restoration and remove build step since turbo test a…

8b18843

…lready depends on build

nperez0111 reviewed Feb 11, 2025

View reviewed changes

nperez0111 approved these changes Feb 11, 2025

View reviewed changes

nperez0111 suggested changes Feb 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] Add vitest integration for package unit testing #6089

[RFC] Add vitest integration for package unit testing #6089

alexvcasillas commented Feb 7, 2025

changeset-bot bot commented Feb 7, 2025 •

edited

Loading

netlify bot commented Feb 7, 2025 •

edited

Loading

bdbch commented Feb 7, 2025

alexvcasillas Feb 7, 2025

nperez0111 Feb 11, 2025

alexvcasillas Feb 7, 2025

alexvcasillas Feb 7, 2025

alexvcasillas Feb 7, 2025

alexvcasillas Feb 7, 2025

alexvcasillas Feb 7, 2025

pkg-pr-new bot commented Feb 7, 2025 •

edited

Loading

alexvcasillas commented Feb 7, 2025

nperez0111 Feb 11, 2025

nperez0111 left a comment

nperez0111 Feb 11, 2025

nperez0111 Feb 11, 2025

nperez0111 Feb 11, 2025

nperez0111 left a comment


		editor.commands.setBold()

		expect(editor.getText()).toContain('Example Text')

[RFC] Add vitest integration for package unit testing #6089

Are you sure you want to change the base?

[RFC] Add vitest integration for package unit testing #6089

Conversation

alexvcasillas commented Feb 7, 2025

Testing Enhancements:

Dependency Updates:

New Tests:

changeset-bot bot commented Feb 7, 2025 • edited Loading

⚠️ No Changeset found

netlify bot commented Feb 7, 2025 • edited Loading

✅ Deploy Preview for tiptap-embed ready!

bdbch commented Feb 7, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkg-pr-new bot commented Feb 7, 2025 • edited Loading

alexvcasillas commented Feb 7, 2025

Choose a reason for hiding this comment

nperez0111 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nperez0111 left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Feb 7, 2025 •

edited

Loading

netlify bot commented Feb 7, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 7, 2025 •

edited

Loading