@servicetitan/docs-anvil-uikit-contrib 37.0.0 → 37.0.1

package/docs/testing-library/01-api.mdx

@@ -12,16 +12,18 @@ When it isn't practical to [mock the API service classes](/docs/frontend/testing
 ### Examples
 
 <Tabs
-defaultValue="jest"
-values={[
-{ label: 'Jest (default)', value: 'jest' },
-{ label: 'Vitest', value: 'vitest' },
-{ label: 'Storybook', value: 'storybook' },
-]}
+    defaultValue="jest"
+    values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest' },
+    { label: 'Storybook', value: 'storybook' },
+    ]}
 >
 <TabItem value="jest">
 
 ```ts
+import { MockApiCalls } from '@servicetitan/testing-library';
+
 describe('[admin] AppRoutes', () => {
     // Create helper to mock API calls
     const apiResponses = new MockApiCalls();
@@ -42,10 +44,10 @@ describe('[admin] AppRoutes', () => {
 </TabItem>
 <TabItem value="vitest">
 
-For Vitest tests, import from the `/vitest` entry point:
+When using Vitest, import from the `/vitest` entry point:
 
 ```ts
-import { MockApiCalls } from '@servicetitan/testing-library/vitest';
+import { MockApiCalls } from '@servicetitan/testing-library/vitest'; // Import from /vitest
 import { describe, it, expect, beforeEach } from 'vitest';
 
 describe('[admin] AppRoutes', () => {
@@ -72,7 +74,7 @@ describe('[admin] AppRoutes', () => {
 For use in Storybook stories or other contexts without Jest or Vitest, import from the `/mock-api-calls` entry point:
 
 ```ts
-import { MockApiCalls } from '@servicetitan/testing-library/mock-api-calls';
+import { MockApiCalls } from '@servicetitan/testing-library/mock-api-calls'; // Import from /mock-api-calls
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof MyComponent> = {

package/docs/testing-library/02-queries.mdx

@@ -2,17 +2,43 @@
 title: Queries
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 Testing Library includes custom [queries](https://testing-library.com/docs/queries/about) that find elements with ServiceTitan specific attributes.
 
 ## Usage
 
 To use custom queries, import them from Testing Library and merge them with the default set of queries attached to rendered components.
 
+<Tabs defaultValue="jest"
+values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest'},
+]}>
+<TabItem value="jest">
+
 ```ts
 import { queries, render } from '@testing-library/react'; // Import default queries
 import { queries as customQueries } from '@servicetitan/testing-library'; // Import custom queries
 
-// ...
+const subject = () => {
+    return render(
+        <MyComponent />,
+        // Merge custom queries with defaults
+        { queries: { ...queries, ...customQueries } }
+    );
+};
+```
+
+</TabItem>
+<TabItem value="vitest">
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import { queries, render } from '@testing-library/react'; // Import default queries
+import { queries as customQueries } from '@servicetitan/testing-library/vitest'; // Import from /vitest
 
 const subject = () => {
     return render(
@@ -23,6 +49,9 @@ const subject = () => {
 };
 ```
 
+</TabItem>
+</Tabs>
+
 ## ByAnvilComponentName
 
 > getByAnvilComponentName, queryByAnvilComponentName, getAllByAnvilComponentName, queryAllByAnvilComponentName, findByAnvilComponentName, findAllByAnvilComponentName

package/docs/testing-library/03-matchers.mdx

@@ -2,6 +2,38 @@
 title: Matchers
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Testing library includes several [custom matchers](https://jestjs.io/docs/using-matchers).
+
+## Usage
+
+To register matchers import the library into tests, or into the global setup:
+
+<Tabs defaultValue="jest"
+values={[
+    { label: 'Jest (default)', value: 'jest' },
+    { label: 'Vitest', value: 'vitest'},
+]}>
+<TabItem value="jest">
+
+```ts
+import '@servicetitan/testing-library';
+```
+
+</TabItem>
+<TabItem value="vitest">
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import '@servicetitan/testing-library/vitest';
+```
+
+</TabItem>
+</Tabs>
+
 ## toBeWithinRange
 
 Checks whether a value equals another value, plus or minus the specified delta.

package/docs/testing-library/index.mdx

@@ -18,3 +18,11 @@ This library has `peerDependencies` for:
 -   `@testing-library/react`: >=12.0.0
 -   `@testing-library/react-hooks`: >=7.0.0 (only if using `@testing-library/react` v12)
 -   `react`: >=17.0.0
+
+## Using with Vitest
+
+When using Vitest, import from the `/vitest` entry point:
+
+```ts
+import '@servicetitan/testing-library/vitest';
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/docs-anvil-uikit-contrib",
-    "version": "37.0.0",
+    "version": "37.0.1",
     "description": "",
     "repository": {
         "type": "git",
@@ -16,5 +16,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "307168f771cf472154019492936165c9a31ed1e9"
+    "gitHead": "213d4ed9274374a6298922722230cea746f815c9"
 }