How to use vue-test-utils - 10 common examples

each(components, (component, key) => {
    const localVue = createLocalVue();
    localVue.use(component, options);

    const cmpName = Object.keys(localVue.options.components)[0];
    const cmp = localVue.options.components[cmpName];
    const wrapper = shallow(cmp, {
      // Required prop definition
      propsData: {
        definition: {},
      },
      // Some components require global validators
      mocks: {
        $chameleon: {
          validators: {},
        },
        form: {},
      },
    });

    it(`Check if ${cmpName} contains base class c-element`, async () => {
      const resolvingPromise = new Promise((resolve) => {
        resolve();

describe('fab-cantainer.vue', () => {
  const localVue = createLocalVue()
  localVue.use(index)
  let wrapper = null

  beforeEach(() => {
    // 初始化wrapper
    wrapper = mount(FabCantainer, {
      localVue
    })
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 999999;
  })

  it('startAnimate', (done) => {
    let timeout = new Timeout()
    expect(wrapper.vm.touching).toBe(false)
    expect(wrapper.vm.animating).toBe(false)
    expect(wrapper.vm.mousedown).toBe(false)

it('should create a SUI CardDescription with default slot', () => {
    const cardContent = shallow(CardDescription, {
      slots: {
        default: '<span>Default slot</span>',
      },
    });
    expect(cardContent.is('div')).to.equal(true);
    expect(cardContent.classes()).to.include('description');
    expect(cardContent.text()).to.equal('Default slot');
  });
});

it('should create a SUI Loader', () => {
    const loader = shallow(Loader);
    expect(loader.is('div')).to.equal(true);
    expect(loader.classes()).to.include('ui');
    expect(loader.classes()).to.include('loader');
  });

it('should have content', () => {
    const segment = shallow(Segment, { slots: { default: '<span>bar</span>' } });
    expect(segment.text()).to.equal('bar');
  });
});

it('should be able to set active', () => {
    const loader1 = shallow(Loader, { propsData: { active: true } });
    expect(loader1.classes()).to.include('active');

    const loader2 = shallow(Loader, { propsData: { active: false } });
    expect(loader2.classes()).to.not.include('active');
  });

it('should be disabled when the Disabled property is true ', () => {
    const button = shallow(Button, { propsData: { content: 'foo', disabled: true } });
    expect(button.classes()).to.include('disabled');
  });
});

test('Basic.vue', t => {
  const wrapper = shallow(Basic)
  t.is(wrapper.find('.hello h1').text(), 'Welcome to Your Vue.js App')
})

test('Parent.vue renders 3 Child components', t => {
  t.plan(1)
  const wrapper = shallow(Parent)
  t.equal(wrapper.findAll(Child).length, 3)
})

it('should update its value with changing model', () => {
      const wrapper = mount(create(``))

      const checkbox = q(wrapper, 'input')
      assert(checkbox.checked === true)
      wrapper.vm.user.hasPhone = false
      return Vue.nextTick().then(() => {
        assert(checkbox.checked === false)
      })
    })