chore: add some SSR test cases (#11801)

packages/vant/src/back-top/test/__snapshots__/ssr.spec.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly when SSR 1`] = `
+<div class="van-back-top"
+     style
+>
+  <i class="van-badge__wrapper van-icon van-icon-back-top van-back-top__icon"
+     style
+  >
+    <!--[-->
+  </i>
+</div>
+`;

packages/vant/src/back-top/test/ssr.spec.ts

@@ -0,0 +1,12 @@
+/**
+ * @jest-environment node
+ */
+import { BackTop } from '..';
+import { renderComponentToString } from '../../../test';
+
+test('should render correctly when SSR', async () => {
+  const html = await renderComponentToString(BackTop, {
+    teleport: '',
+  });
+  expect(html).toMatchSnapshot();
+});

packages/vant/src/signature/test/__snapshots__/ssr.spec.ts.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly when SSR 1`] = `
+<div class="van-signature">
+  <div class="van-signature__content">
+    <canvas width="0"
+            height="0"
+    >
+    </canvas>
+  </div>
+  <div class="van-signature__footer">
+    <button type="button"
+            class="van-button van-button--default van-button--small"
+            style
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          <!--[-->
+          Cancel
+        </span>
+      </div>
+    </button>
+    <button type="button"
+            class="van-button van-button--primary van-button--small"
+            style
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          <!--[-->
+          Confirm
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;

packages/vant/src/signature/test/ssr.spec.ts

@@ -0,0 +1,10 @@
+/**
+ * @jest-environment node
+ */
+import { Signature } from '..';
+import { renderComponentToString } from '../../../test';
+
+test('should render correctly when SSR', async () => {
+  const html = await renderComponentToString(Signature);
+  expect(html).toMatchSnapshot();
+});

packages/vant/src/watermark/test/__snapshots__/ssr.spec.ts.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly when SSR 1`] = `
+<div class="van-watermark van-watermark--full"
+     style="background-image:url();"
+>
+  <div class="van-watermark__wrapper">
+    <svg viewbox="0 0 100 100"
+         width="100"
+         height="100"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
+         style="padding:0 0px 0px 0;"
+    >
+      <foreignObject x="0"
+                     y="0"
+                     width="100"
+                     height="100"
+      >
+        <div xmlns="http://www.w3.org/1999/xhtml"
+             style="transform-origin:center;transform:rotate(-22deg);"
+        >
+          <span style="color:#dcdee0;">
+          </span>
+        </div>
+      </foreignObject>
+    </svg>
+  </div>
+</div>
+`;

packages/vant/src/watermark/test/ssr.spec.ts

@@ -0,0 +1,10 @@
+/**
+ * @jest-environment node
+ */
+import { Watermark } from '..';
+import { renderComponentToString } from '../../../test';
+
+test('should render correctly when SSR', async () => {
+  const html = await renderComponentToString(Watermark);
+  expect(html).toMatchSnapshot();
+});

packages/vant/test/dom.ts

@@ -1,7 +1,12 @@
 import { nextTick } from 'vue';
 import { trigger } from './event';
+import { inBrowser } from '@vant/use';
 
 function mockHTMLElementOffset() {
+  if (!inBrowser) {
+    return;
+  }
+
   Object.defineProperties(HTMLElement.prototype, {
     offsetParent: {
       get() {
@@ -33,14 +38,19 @@ function mockHTMLElementOffset() {
 
 export function mockScrollIntoView() {
   const fn = jest.fn();
-  Element.prototype.scrollIntoView = fn;
+  if (inBrowser) {
+    Element.prototype.scrollIntoView = fn;
+  }
   return fn;
 }
 
 export function mockGetBoundingClientRect(rect: Partial<DOMRect>): () => void {
-  const spy = jest.spyOn(Element.prototype, 'getBoundingClientRect');
+  if (inBrowser) {
-  spy.mockReturnValue(rect as DOMRect);
+    const spy = jest.spyOn(Element.prototype, 'getBoundingClientRect');
-  return () => spy.mockRestore();
+    spy.mockReturnValue(rect as DOMRect);
+    return () => spy.mockRestore();
+  }
+  return () => {};
 }
 
 export async function mockScrollTop(value: number) {

packages/vant/test/index.ts

@@ -1,3 +1,5 @@
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
 import './plugin';
 import Locale from '../src/locale';
 import enUS from '../src/locale/lang/en-US';
@@ -11,6 +13,14 @@ export function later(delay = 0): Promise<void> {
   });
 }
 
+export const renderComponentToString = async (
+  ...args: Parameters<typeof createSSRApp>
+) => {
+  const app = createSSRApp(...args);
+  const html = await renderToString(app);
+  return html;
+};
+
 export * from './dom';
 export * from './event';
 export { mount } from '@vue/test-utils';

packages/vant/test/plugin.ts

@@ -1,23 +1,19 @@
 /* eslint-disable max-classes-per-file */
-import { ComponentPublicInstance } from 'vue';
+import { config } from '@vue/test-utils';
-import { config, VueWrapper, DOMWrapper } from '@vue/test-utils';
 
 declare module '@vue/test-utils' {
   // eslint-disable-next-line
-  export class DOMWrapper<ElementType extends Element> {
+  export class DOMWrapper<NodeType extends Node> {
     style: CSSStyleDeclaration;
   }
 
-  // eslint-disable-next-line
+  export class VueWrapper {
-  class VueWrapper<T extends ComponentPublicInstance> {
     style: CSSStyleDeclaration;
   }
 }
 
-const stylePlugin = (
+const stylePlugin = (wrapper: any) => ({
-  wrapper: VueWrapper<ComponentPublicInstance> | DOMWrapper<Element>
+  style: wrapper.element.style,
-) => ({
-  style: (wrapper.element as HTMLElement).style,
 });
 
 config.plugins.DOMWrapper.install(stylePlugin);