diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
deleted file mode 100644
index 6e4007551..000000000
--- a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ /dev/null
@@ -1,478 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/tour/demo/basic.tsx extend context correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Begin Tour
-    </span>
-  </button>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-           Upload
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Save
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-icon-only"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders ./components/tour/demo/non-modal.tsx extend context correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Begin non-modal Tour
-    </span>
-  </button>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-           Upload
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Save
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-icon-only"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders ./components/tour/demo/placement.tsx extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Begin Tour
-  </span>
-</button>
-`;
-
-exports[`renders ./components/tour/demo/render-panel.tsx extend context correctly 1`] = `
-<div
-  style="display:flex;flex-direction:column;row-gap:16px;background:rgba(50,0,0,0.65);padding:8px"
->
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Next
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-cover"
-            >
-              <img
-                alt="tour.png"
-                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
-              />
-            </div>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
-                  type="button"
-                >
-                  <span>
-                    Previous
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Next
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure ant-tour-primary"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-primary ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
-                  type="button"
-                >
-                  <span>
-                    Previous
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Finish
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/components/tour/__tests__/__snapshots__/demo.test.js.snap b/components/tour/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..13974b525
--- /dev/null
+++ b/components/tour/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/tour/demo/basic.vue correctly 1`] = `
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Begin Tour</span>
+</button>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>Upload</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Save</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
+    </button></div>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/tour/demo/indicator.vue correctly 1`] = `
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Begin Tour</span>
+</button>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>Upload</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Save</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
+    </button></div>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/tour/demo/mask.vue correctly 1`] = `
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Begin Tour</span>
+</button>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>Upload</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Save</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
+    </button></div>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/tour/demo/non-modal.vue correctly 1`] = `
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Begin Tour</span>
+</button>
+<div class="ant-divider ant-divider-horizontal" role="separator">
+  <!---->
+</div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span>Upload</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
+      <!----><span>Save</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
+      <!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
+    </button></div>
+  <!---->
+</div>
+`;
+
+exports[`renders ./components/tour/demo/placement.vue correctly 1`] = `
+<button class="ant-btn ant-btn-primary" type="button">
+  <!----><span>Begin Tour</span>
+</button>
+`;
diff --git a/components/tour/__tests__/__snapshots__/demo.test.ts.snap b/components/tour/__tests__/__snapshots__/demo.test.ts.snap
deleted file mode 100644
index 4b5100299..000000000
--- a/components/tour/__tests__/__snapshots__/demo.test.ts.snap
+++ /dev/null
@@ -1,478 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./components/tour/demo/basic.tsx correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Begin Tour
-    </span>
-  </button>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-           Upload
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Save
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-icon-only"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders ./components/tour/demo/non-modal.tsx correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-btn-primary"
-    type="button"
-  >
-    <span>
-      Begin non-modal Tour
-    </span>
-  </button>,
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />,
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-default"
-        type="button"
-      >
-        <span>
-           Upload
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span>
-          Save
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-default ant-btn-icon-only"
-        type="button"
-      >
-        <span
-          aria-label="ellipsis"
-          class="anticon anticon-ellipsis"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="ellipsis"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders ./components/tour/demo/placement.tsx correctly 1`] = `
-<button
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    Begin Tour
-  </span>
-</button>
-`;
-
-exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = `
-<div
-  style="display:flex;flex-direction:column;row-gap:16px;background:rgba(50,0,0,0.65);padding:8px"
->
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Next
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-cover"
-            >
-              <img
-                alt="tour.png"
-                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
-              />
-            </div>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
-                  type="button"
-                >
-                  <span>
-                    Previous
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Next
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure ant-tour-primary"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-arrow"
-      />
-      <div
-        class="ant-tour-inner"
-        role="tooltip"
-      >
-        <div
-          class="ant-tour-primary ant-tour-content"
-        >
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                Hello World!
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              Hello World?!
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
-                  type="button"
-                >
-                  <span>
-                    Previous
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Finish
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 43f7f3c83..000000000
--- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,706 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tour Primary 1`] = `
-<body>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div>
-    <button
-      disabled=""
-      type="button"
-    >
-      Cover
-    </button>
-    <div>
-      <div
-        class="ant-tour"
-        style="z-index: 1090; opacity: 0;"
-      >
-        <div
-          class="ant-tour-primary ant-tour-content"
-        >
-          <div
-            class="ant-tour-arrow"
-          />
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-              tabindex="-1"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                primary title
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              primary description.
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              />
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Finish
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
-  <div>
-    <div
-      class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
-    >
-      <svg
-        style="width: 100%; height: 100%;"
-      >
-        <defs>
-          <mask
-            id="ant-tour-mask-test-id"
-          >
-            <rect
-              fill="white"
-              height="100%"
-              width="100%"
-              x="0"
-              y="0"
-            />
-            <rect
-              class="ant-tour-placeholder-animated"
-              fill="black"
-              height="12"
-              rx="2"
-              width="12"
-              x="-6"
-              y="-6"
-            />
-          </mask>
-        </defs>
-        <rect
-          fill="rgba(0,0,0,0.5)"
-          height="100%"
-          mask="url(#ant-tour-mask-test-id)"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="-6"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="-6"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="calc(100vh - 6px)"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="6"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="calc(100vw - 6px)"
-          x="6"
-          y="0"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-</body>
-`;
-
-exports[`Tour basic 1`] = `
-<body>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div>
-    <div>
-      <button
-        type="button"
-      >
-        Show
-      </button>
-      <button
-        disabled=""
-        type="button"
-      >
-        Cover
-      </button>
-      <button
-        disabled=""
-        type="button"
-      >
-        Placement
-      </button>
-    </div>
-    <div />
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-</body>
-`;
-
-exports[`Tour button props onClick 1`] = `
-<body>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div>
-    <span
-      id="btnName"
-    >
-      finishButton
-    </span>
-    <button
-      disabled=""
-      type="button"
-    >
-      target
-    </button>
-    <div />
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-</body>
-`;
-
-exports[`Tour custom step pre btn & next btn className & style 1`] = `
-<div>
-  <div
-    class="ant-tour"
-    style="z-index: 1090; opacity: 0;"
-  >
-    <div
-      class="ant-tour-content"
-    >
-      <div
-        class="ant-tour-inner"
-      >
-        <span
-          aria-label="close"
-          class="anticon anticon-close ant-tour-close"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
-        </span>
-        <div
-          class="ant-tour-header"
-        >
-          <div
-            class="ant-tour-title"
-          >
-            Show in Center
-          </div>
-        </div>
-        <div
-          class="ant-tour-description"
-        >
-          Here is the content of Tour.
-        </div>
-        <div
-          class="ant-tour-footer"
-        >
-          <div
-            class="ant-tour-sliders"
-          >
-            <span
-              class="ant-tour-slider-active ant-tour-slider"
-            />
-            <span
-              class="ant-tour-slider"
-            />
-          </div>
-          <div
-            class="ant-tour-buttons"
-          >
-            <button
-              class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn customClassName"
-              style="background-color: rgb(69, 69, 255);"
-              type="button"
-            >
-              <span>
-                Next
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
-
-exports[`Tour single 1`] = `
-<body>
-  <div>
-    <button
-      disabled=""
-      type="button"
-    >
-      Cover
-    </button>
-    <div>
-      <div
-        class="ant-tour"
-        style="z-index: 1090; opacity: 0;"
-      >
-        <div
-          class="ant-tour-content"
-        >
-          <div
-            class="ant-tour-arrow"
-          />
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-              tabindex="-1"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                cover title
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              cover description.
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              />
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Finish
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
-  <div>
-    <div
-      class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
-    >
-      <svg
-        style="width: 100%; height: 100%;"
-      >
-        <defs>
-          <mask
-            id="ant-tour-mask-test-id"
-          >
-            <rect
-              fill="white"
-              height="100%"
-              width="100%"
-              x="0"
-              y="0"
-            />
-            <rect
-              class="ant-tour-placeholder-animated"
-              fill="black"
-              height="12"
-              rx="2"
-              width="12"
-              x="-6"
-              y="-6"
-            />
-          </mask>
-        </defs>
-        <rect
-          fill="rgba(0,0,0,0.5)"
-          height="100%"
-          mask="url(#ant-tour-mask-test-id)"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="-6"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="-6"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="calc(100vh - 6px)"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="6"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="calc(100vw - 6px)"
-          x="6"
-          y="0"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-</body>
-`;
-
-exports[`Tour step support Primary 1`] = `
-<body>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div>
-    <button
-      disabled=""
-      type="button"
-    >
-      Cover
-    </button>
-    <div>
-      <div
-        class="ant-tour"
-        style="z-index: 1090; opacity: 0;"
-      >
-        <div
-          class="ant-tour-primary ant-tour-content"
-        >
-          <div
-            class="ant-tour-arrow"
-          />
-          <div
-            class="ant-tour-inner"
-          >
-            <span
-              aria-label="close"
-              class="anticon anticon-close ant-tour-close"
-              role="img"
-              tabindex="-1"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="close"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-                />
-              </svg>
-            </span>
-            <div
-              class="ant-tour-header"
-            >
-              <div
-                class="ant-tour-title"
-              >
-                primary title
-              </div>
-            </div>
-            <div
-              class="ant-tour-description"
-            >
-              primary description.
-            </div>
-            <div
-              class="ant-tour-footer"
-            >
-              <div
-                class="ant-tour-sliders"
-              >
-                <span
-                  class="ant-tour-slider"
-                />
-                <span
-                  class="ant-tour-slider-active ant-tour-slider"
-                />
-              </div>
-              <div
-                class="ant-tour-buttons"
-              >
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
-                  type="button"
-                >
-                  <span>
-                    Previous
-                  </span>
-                </button>
-                <button
-                  class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
-                  type="button"
-                >
-                  <span>
-                    Finish
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <div
-      class="ant-tour-target-placeholder"
-      style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
-    />
-  </div>
-  <div>
-    <div
-      class="ant-tour-mask"
-      style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
-    >
-      <svg
-        style="width: 100%; height: 100%;"
-      >
-        <defs>
-          <mask
-            id="ant-tour-mask-test-id"
-          >
-            <rect
-              fill="white"
-              height="100%"
-              width="100%"
-              x="0"
-              y="0"
-            />
-            <rect
-              class="ant-tour-placeholder-animated"
-              fill="black"
-              height="12"
-              rx="2"
-              width="12"
-              x="-6"
-              y="-6"
-            />
-          </mask>
-        </defs>
-        <rect
-          fill="rgba(0,0,0,0.5)"
-          height="100%"
-          mask="url(#ant-tour-mask-test-id)"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="-6"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="-6"
-          x="0"
-          y="0"
-        />
-        <rect
-          fill="transparent"
-          height="calc(100vh - 6px)"
-          pointer-events="auto"
-          width="100%"
-          x="0"
-          y="6"
-        />
-        <rect
-          fill="transparent"
-          height="100%"
-          pointer-events="auto"
-          width="calc(100vw - 6px)"
-          x="6"
-          y="0"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-</body>
-`;
-
-exports[`Tour steps is empty 1`] = `
-<body>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
-  <div>
-    <button
-      disabled=""
-      type="button"
-    >
-      Cover
-    </button>
-  </div>
-</body>
-`;
-
diff --git a/components/tour/__tests__/demo-extend.test.ts b/components/tour/__tests__/demo-extend.test.ts
deleted file mode 100644
index f8acbed23..000000000
--- a/components/tour/__tests__/demo-extend.test.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { extendTest } from '../../../tests/shared/demoTest';
-
-extendTest('tour');
diff --git a/components/tour/__tests__/demo.test.ts b/components/tour/__tests__/demo.test.js
similarity index 100%
rename from components/tour/__tests__/demo.test.ts
rename to components/tour/__tests__/demo.test.js
diff --git a/components/tour/__tests__/image.test.ts b/components/tour/__tests__/image.test.ts
deleted file mode 100644
index 4268c7ab9..000000000
--- a/components/tour/__tests__/image.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { imageDemoTest } from '../../../tests/shared/imageTest';
-
-describe('Tooltip tour', () => {
-  imageDemoTest('tour');
-});
diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx
deleted file mode 100644
index 4f5e192e7..000000000
--- a/components/tour/__tests__/index.test.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import Tour from '..';
-import mountTest from '../../../tests/shared/mountTest';
-import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, screen } from '../../../tests/utils';
-import panelRender from '../panelRender';
-
-describe('Tour', () => {
-  mountTest(Tour);
-  rtlTest(Tour);
-
-  it('single', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      return (
-        <>
-          <button disabled ref={coverBtnRef} type="button">
-            Cover
-          </button>
-          <Tour
-            steps={[
-              {
-                title: 'cover title',
-                description: 'cover description.',
-                target: () => coverBtnRef.current!,
-              },
-            ]}
-          />
-        </>
-      );
-    };
-    const { getByText, baseElement } = render(<App />);
-    expect(getByText('cover title')).toBeTruthy();
-    expect(getByText('cover description.')).toBeTruthy();
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('steps is empty', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      return (
-        <>
-          <button disabled ref={coverBtnRef} type="button">
-            Cover
-          </button>
-          <Tour steps={[]} />
-          <Tour />
-        </>
-      );
-    };
-    const { baseElement } = render(<App />);
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('button props onClick', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      const [btnName, steBtnName] = React.useState<string>('defaultBtn');
-      return (
-        <>
-          <span id="btnName">{btnName}</span>
-          <button disabled ref={coverBtnRef} type="button">
-            target
-          </button>
-
-          <Tour
-            steps={[
-              {
-                title: '',
-                description: '',
-                target: () => coverBtnRef.current!,
-                nextButtonProps: {
-                  onClick: () => steBtnName('nextButton'),
-                },
-              },
-              {
-                title: '',
-                target: () => coverBtnRef.current!,
-                prevButtonProps: {
-                  onClick: () => steBtnName('prevButton'),
-                },
-                nextButtonProps: {
-                  onClick: () => steBtnName('finishButton'),
-                },
-              },
-            ]}
-          />
-        </>
-      );
-    };
-    const { baseElement } = render(<App />);
-    expect(baseElement.querySelector('#btnName')).toHaveTextContent('defaultBtn');
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
-    expect(baseElement.querySelector('#btnName')).toHaveTextContent('nextButton');
-    fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
-    expect(baseElement.querySelector('#btnName')).toHaveTextContent('prevButton');
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
-    expect(baseElement.querySelector('#btnName')).toHaveTextContent('finishButton');
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('Primary', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      return (
-        <>
-          <button disabled ref={coverBtnRef} type="button">
-            Cover
-          </button>
-
-          <Tour
-            type="primary"
-            steps={[
-              {
-                title: 'primary title',
-                description: 'primary description.',
-                target: () => coverBtnRef.current!,
-              },
-            ]}
-          />
-        </>
-      );
-    };
-    const { getByText, baseElement } = render(<App />);
-    expect(getByText('primary description.')).toBeTruthy();
-    expect(baseElement.querySelector('.ant-tour-content')).toHaveClass('ant-tour-primary');
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('step support Primary', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      return (
-        <>
-          <button disabled ref={coverBtnRef} type="button">
-            Cover
-          </button>
-
-          <Tour
-            type="default"
-            steps={[
-              {
-                title: 'cover title',
-                description: 'cover description.',
-                target: () => coverBtnRef.current!,
-              },
-              {
-                title: 'primary title',
-                description: 'primary description.',
-                target: () => coverBtnRef.current!,
-                type: 'primary',
-              },
-            ]}
-          />
-        </>
-      );
-    };
-    const { getByText, container, baseElement } = render(<App />);
-    expect(getByText('cover description.')).toBeTruthy();
-    expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeFalsy();
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
-    expect(getByText('primary description.')).toBeTruthy();
-    expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeTruthy();
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('basic', () => {
-    const App: React.FC = () => {
-      const coverBtnRef = useRef<HTMLButtonElement>(null);
-      const placementBtnRef = useRef<HTMLButtonElement>(null);
-
-      const [show, setShow] = React.useState<boolean>();
-
-      useEffect(() => {
-        if (show === false) {
-          setShow(true);
-        }
-      }, [show]);
-
-      return (
-        <>
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                setShow(false);
-              }}
-            >
-              Show
-            </button>
-            <button disabled ref={coverBtnRef} type="button">
-              Cover
-            </button>
-            <button disabled ref={placementBtnRef} type="button">
-              Placement
-            </button>
-          </div>
-
-          {show && (
-            <Tour
-              steps={[
-                {
-                  title: 'Show in Center',
-                  description: 'Here is the content of Tour.',
-                  target: null,
-                },
-                {
-                  title: 'With Cover',
-                  description: 'Here is the content of Tour.',
-                  target: () => coverBtnRef.current!,
-                  cover: (
-                    <img
-                      alt="tour.png"
-                      src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
-                    />
-                  ),
-                },
-                {
-                  title: 'Adjust Placement',
-                  description: 'Here is the content of Tour which show on the right.',
-                  placement: 'right',
-                  target: () => placementBtnRef.current!,
-                },
-              ]}
-            />
-          )}
-        </>
-      );
-    };
-    const { getByText, container, baseElement } = render(<App />);
-    fireEvent.click(screen.getByRole('button', { name: 'Show' }));
-    expect(getByText('Show in Center')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
-    expect(getByText('Here is the content of Tour.')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Next' }));
-    expect(getByText('Adjust Placement')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
-    expect(container.querySelector('.ant-tour')).toBeFalsy();
-    expect(baseElement).toMatchSnapshot();
-  });
-  it('panelRender should correct render when total is undefined', () => {
-    expect(() => {
-      panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
-    }).not.toThrow();
-  });
-
-  it('custom step pre btn & next btn className & style', () => {
-    const App: React.FC = () => (
-      <Tour
-        steps={[
-          {
-            title: 'Show in Center',
-            description: 'Here is the content of Tour.',
-            nextButtonProps: {
-              className: 'customClassName',
-              style: {
-                backgroundColor: 'rgb(69,69,255)',
-              },
-            },
-          },
-          {
-            title: 'With Cover',
-            description: 'Here is the content of Tour.',
-            cover: (
-              <img
-                alt="tour.png"
-                src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
-              />
-            ),
-          },
-        ]}
-      />
-    );
-
-    const { container } = render(<App />);
-    // className
-    expect(
-      screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'),
-    ).toEqual(true);
-    // style
-    expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual(
-      'rgb(69, 69, 255)',
-    );
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});