test: update modal test

components/modal/__tests__/Modal.test.js

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import Vue from 'vue'
 import Modal from '..'
 
 const ModalTester = {
@@ -8,10 +9,6 @@ const ModalTester = {
       return this.$refs.container
     },
   },
-  updated () {
-    console.log('updated')
-  },
-
   render () {
     const modalProps = {
       props: {
@@ -33,18 +30,24 @@ const ModalTester = {
 }
 
 describe('Modal', () => {
-  it('render correctly', () => {
-    const wrapper = mount(ModalTester)
-    wrapper.setProps({ visible: true })
-    expect(wrapper.html()).toMatchSnapshot()
-    const wrapper1 = mount(
+  it('render correctly', (done) => {
+    const wrapper = mount(
       {
         render () {
           return <ModalTester visible />
         },
       }
     )
-    expect(wrapper1.html()).toMatchSnapshot()
+    expect(wrapper.html()).toMatchSnapshot()
+    // https://github.com/vuejs/vue-test-utils/issues/624
+    const wrapper1 = mount(ModalTester, {
+      sync: false,
+    })
+    wrapper1.setProps({ visible: true })
+    Vue.nextTick(() => {
+      expect(wrapper1.html()).toMatchSnapshot()
+      done()
+    })
   })
 
   it('render without footer', () => {

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -2,7 +2,26 @@
 
 exports[`Modal render correctly 1`] = `
 <div>
-  <div></div>
+  <div>
+    <div>
+      <div class="ant-modal-mask"></div>
+      <div tabindex="-1" role="dialog" class="ant-modal-wrap ">
+        <div role="document" class="ant-modal" style="width: 520px;">
+          <div class="ant-modal-content">
+            <button aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"></span></button>
+            <div class="ant-modal-body">Here is content of Modal</div>
+            <div class="ant-modal-footer">
+              <div>
+                <button type="button" class="ant-btn ant-btn-default"><span>Cancel</span></button>
+                <button type="button" class="ant-btn ant-btn-primary"><span>OK</span></button>
+              </div>
+            </div>
+          </div>
+          <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinel</div>
+        </div>
+      </div>
+    </div>
+  </div>
   <!---->
 </div>
 `;

tests/setup.js

@@ -1,5 +1,5 @@
-import Vue from 'vue'
-Vue.config.silent = true
+// import Vue from 'vue'
+// Vue.config.silent = true
 
 /* eslint-disable global-require */
 if (typeof window !== 'undefined') {