diff --git a/packages/vant/src/back-top/test/__snapshots__/ssr.spec.ts.snap b/packages/vant/src/back-top/test/__snapshots__/ssr.spec.ts.snap
new file mode 100644
index 000000000..30c5068f9
--- /dev/null
+++ b/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`] = `
+
+
+
+
+
+`;
diff --git a/packages/vant/src/back-top/test/ssr.spec.ts b/packages/vant/src/back-top/test/ssr.spec.ts
new file mode 100644
index 000000000..949df7e97
--- /dev/null
+++ b/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();
+});
diff --git a/packages/vant/src/signature/test/__snapshots__/ssr.spec.ts.snap b/packages/vant/src/signature/test/__snapshots__/ssr.spec.ts.snap
new file mode 100644
index 000000000..d3879c9b2
--- /dev/null
+++ b/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`] = `
+
+`;
diff --git a/packages/vant/src/signature/test/ssr.spec.ts b/packages/vant/src/signature/test/ssr.spec.ts
new file mode 100644
index 000000000..254f9d384
--- /dev/null
+++ b/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();
+});
diff --git a/packages/vant/src/watermark/test/__snapshots__/ssr.spec.ts.snap b/packages/vant/src/watermark/test/__snapshots__/ssr.spec.ts.snap
new file mode 100644
index 000000000..7374f1892
--- /dev/null
+++ b/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`] = `
+
+`;
diff --git a/packages/vant/src/watermark/test/ssr.spec.ts b/packages/vant/src/watermark/test/ssr.spec.ts
new file mode 100644
index 000000000..0e2bfc7b1
--- /dev/null
+++ b/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();
+});
diff --git a/packages/vant/test/dom.ts b/packages/vant/test/dom.ts
index 8f0bfb352..a913eb7c3 100644
--- a/packages/vant/test/dom.ts
+++ b/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): () => void {
- const spy = jest.spyOn(Element.prototype, 'getBoundingClientRect');
- spy.mockReturnValue(rect as DOMRect);
- return () => spy.mockRestore();
+ if (inBrowser) {
+ const spy = jest.spyOn(Element.prototype, 'getBoundingClientRect');
+ spy.mockReturnValue(rect as DOMRect);
+ return () => spy.mockRestore();
+ }
+ return () => {};
}
export async function mockScrollTop(value: number) {
diff --git a/packages/vant/test/index.ts b/packages/vant/test/index.ts
index 75878a86c..16afa291c 100644
--- a/packages/vant/test/index.ts
+++ b/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 {
});
}
+export const renderComponentToString = async (
+ ...args: Parameters
+) => {
+ const app = createSSRApp(...args);
+ const html = await renderToString(app);
+ return html;
+};
+
export * from './dom';
export * from './event';
export { mount } from '@vue/test-utils';
diff --git a/packages/vant/test/plugin.ts b/packages/vant/test/plugin.ts
index 364968866..bfbe562dc 100644
--- a/packages/vant/test/plugin.ts
+++ b/packages/vant/test/plugin.ts
@@ -1,23 +1,19 @@
/* eslint-disable max-classes-per-file */
-import { ComponentPublicInstance } from 'vue';
-import { config, VueWrapper, DOMWrapper } from '@vue/test-utils';
+import { config } from '@vue/test-utils';
declare module '@vue/test-utils' {
// eslint-disable-next-line
- export class DOMWrapper {
+ export class DOMWrapper {
style: CSSStyleDeclaration;
}
- // eslint-disable-next-line
- class VueWrapper {
+ export class VueWrapper {
style: CSSStyleDeclaration;
}
}
-const stylePlugin = (
- wrapper: VueWrapper | DOMWrapper
-) => ({
- style: (wrapper.element as HTMLElement).style,
+const stylePlugin = (wrapper: any) => ({
+ style: wrapper.element.style,
});
config.plugins.DOMWrapper.install(stylePlugin);