@vue/test-utils#mount TypeScript Examples

renderHook = <Result>(
  callback: () => Result | void = () => { },
): RenderHookResult<Result> => {
  let result
  const Container = defineComponent({
    setup() {
      result = callback()
      return result
    },
    render() {
      return null
    },
  })
  mount(Container)

  return {
    result,
  }
}

describe('RequestConfig', () => {
  const Child = defineComponent({
    setup() {
      return () => <button>button</button>;
    },
  });
  it('RequestConfig default slots should work ', () => {
    const wrapperA = mount(
      defineComponent({
        setup() {
          return () => (
            <RequestConfig config={{ loadingDelay: 0 }}>
              this is a text
            </RequestConfig>
          );
        },
      }),
    );
    expect(wrapperA.html()).toMatchSnapshot();
    wrapperA.unmount();

    const wrapperB = mount(
      defineComponent({
        setup() {
          return () => (
            <RequestConfig config={{ loadingDelay: 0 }}>
              this is a text
              <Child />
            </RequestConfig>
          );
        },
      }),
    );
    expect(wrapperB.html()).toMatchSnapshot();
  });
});

test('props type', async () => {
  const wrapper = mount(EAlert, {
    props: {
      title: 'title',
      type: 'success',
    },
  })
  expect(wrapper.find('.el-alert').classes()).toContain('el-alert--success')
})

describe('NeonSkeletonLoader', () => {
  it('renders correct number of loading bars', () => {
    // given
    const count = 5;
    const wrapper = mount(NeonSkeletonLoader, {
      propsData: { count },
    });
    // when / then
    expect(wrapper.findAll('.neon-skeleton-loader__item').length).toEqual(count);
  });
});

describe('AvatarGroup', () => {
  it('should be work as avatar container', () => {
    const wrapper = mount({
      render() {
        return (
          <AvatarGroup count="10">
            <Avatar text="a" stacked />
            <Avatar text="b" stacked />
          </AvatarGroup>
        )
      }
    })

    expect(wrapper.html()).toMatchSnapshot()

    expect(wrapper.find('.fect-avatar__counter').text()).toBe('+10')

    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('avatar context props should be work', () => {
    const wrapper = mount({
      render() {
        return (
          <AvatarGroup count="10" stacked size="mini" isSquare>
            <Avatar text="a" />
            <Avatar text="b" isSquare={false} />
          </AvatarGroup>
        )
      }
    })

    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('vue warning interception', () => {
  it('decodes W650', () => {
    const warning = jest.fn(() => {})
    const mock = jest.spyOn(global.console, 'warn').mockImplementation(warning)
    mount(FormKitSchema, {
      props: {
        schema: ['$get(true).value'],
      },
      global: {
        plugins: [[plugin, defaultConfig]],
      },
    })
    mock.mockRestore()
    expect(warning).toBeCalledWith(
      'Schema "$get()" must use the id of an input to access.'
    )
  })
  it('decodes W651', () => {
    const warning = jest.fn(() => {})
    const mock = jest.spyOn(global.console, 'warn').mockImplementation(warning)
    mount(
      {
        template: `<h1>hi</h1>`,
        setup() {
          setErrors('nothere', {})
        },
      },
      {
        global: {
          plugins: [[plugin, defaultConfig]],
        },
      }
    )
    mock.mockRestore()
    expect(warning).toBeCalledWith(
      'Cannot setErrors() on "nothere" because no such id exists.'
    )
  })
})

mountWithPlugin = (pluginOptions: Partial<GetTextOptions>) => (componentOptions: any) => {
  const gettext = createGettext(pluginOptions);
  return mount(componentOptions, {
    global: {
      plugins: [gettext],
    },
  });
}

describe('VNumeric.js', () => {
  it('renders', () => {
    const wrapper = mount(VNumeric, {
      vuetify,
      propsData: {
        value,
        useGrouping: true,
        precision,
        prefix
      }
    })
    // wrapper.nextTick()
    // const input = wrapper.element.getElementsByTagName('input')[0]
    // console.log(input)
    // // expect(input.innerText).toMatch('$1,258.00')
    expect(wrapper.html()).toMatchSnapshot()
  })
})

describe('test useLifecycles', () => {
  test('callback should be called when mounted or unmounted', () => {
    const onMounted = jest.fn()
    const onUnmounted = jest.fn()
    const wrapper = mount({
      template: '<div>test</div>',
      setup () {
        useLifecycles(onMounted, onUnmounted)
      }
    })
    expect(onMounted).toHaveBeenCalledTimes(1)
    wrapper.unmount()
    expect(onUnmounted).toHaveBeenCalledTimes(1)
  })
})

describe('CollectionList component', () => {
  let vuetify: Vuetify

  beforeEach(() => {
    vuetify = new Vuetify()
  })

  it('exports a valid component', () => {
    const wrapper = mount(CollectionList, {
      vuetify,
      mocks: {
        $store: {
          dispatch: () => [],
          commit: () => {
            // empty
          },
        },
      },
      localVue,
    })
    expect(wrapper.html()).toBeTruthy()
  })
})

describe('BarChart', () => {
  test('should render without crashed', () => {
    mount(BarChart, {
      props: {
        data: [],
        xField: 'a',
        yField: 'b',
      },
    })
  })
})

test('create', async () => {
  const wrapper = mount(EAlert, {
    props: { title: 'title' },
  })
  expect(wrapper.find('.el-alert').classes()).toContain('el-alert')
})

test("Expect to create store", () => {
    const nodes = {
        id1: {
            text: "text1"
        }
    };

    const config = {
        roots: ["id1"]
    };

    const wrapper = mount({
        template: "<div></div>",
        props: ["nodes", "config"]
    }, {
        propsData: {
            nodes,
            config
        }
    });

    const id = createState(wrapper.props() as any);

    const state = states.get(id);

    expect(isRef(state.nodes)).toBe(true);
    expect(isReadonly(state.nodes)).toBe(true);
    expect(state.nodes.value.id1).toMatchObject({text: "text1"});
       
    expect(isRef(state.config)).toBe(true);
    expect(isReadonly(state.config)).toBe(true);
    expect(state.config.value).toMatchObject({roots:["id1"]});

    expect(isRef(state.focusable)).toBe(true);
    expect(state.focusable.value).toBeNull();

    expect(isRef(state.dragged)).toBe(true);
    expect(state.dragged.value).toMatchObject({
        node: null,
        element: null,
        wrapper: null,
        parentId: null
    });
});

describe('NeonSideNav', () => {
  it('renders sticky slot contents', () => {
    // given
    const slotValue = 'xd';
    const wrapper = mount(NeonSideNav, {
      propsData: {},
      slots: {
        sticky: `<p>${slotValue}</p>`,
      },
    });
    // when / then
    expect(wrapper.find('.neon-side-nav__sticky p').text()).toEqual(slotValue);
  });

  it('renders scrolling slot contents', () => {
    // given
    const slotValue = 'xd';
    const wrapper = mount(NeonSideNav, {
      propsData: {},
      slots: {
        scrolling: `<p>${slotValue}</p>`,
      },
    });
    // when / then
    expect(wrapper.find('.neon-side-nav__scrolling p').text()).toEqual(slotValue);
  });

  it('renders hr when sticky and scrolling slots contents', () => {
    // given
    const slotValue = 'xd';
    const wrapper = mount(NeonSideNav, {
      propsData: {},
      slots: {
        sticky: `<p>${slotValue}</p>`,
        scrolling: `<p>${slotValue}</p>`,
      },
    });
    // when / then
    expect(wrapper.find('.neon-side-nav hr').element).toBeDefined();
  });

  it('renders full width class', () => {
    // given
    const wrapper = mount(NeonSideNav, {
      propsData: { fullWidth: true },
    });
    // when / then
    expect(wrapper.find('.neon-side-nav--full-width').element).toBeDefined();
  });
});

describe('Avatar', () => {
  it('should be support square and circle', () => {
    const circle = mount(Avatar, {})
    expect(() => circle.unmount()).not.toThrow()
    const square = mount(Avatar, {
      props: {
        isSquare: true
      }
    })
    expect(() => square.unmount()).not.toThrow()
  })

  it('should be limited 4 characters', () => {
    const ava = mount(Avatar, {
      props: {
        text: 'XeryYue'
      }
    })
    const text = ava.find('.fect-avatar__text').text()
    expect(text.length).toBeLessThanOrEqual(3)
  })
  it('should be render as Element', () => {
    const normalAva = mount(Avatar, {
      props: {
        src: BASE_IMG_URL,
        size: 'mini'
      }
    })
    expect(normalAva.html()).toMatchSnapshot()
    const textAva = mount(Avatar, {
      props: {
        text: 'test'
      }
    })
    expect(textAva.html()).toMatchSnapshot()
  })

  it('stacked should be work', () => {
    const ava = mount(Avatar, {
      props: {
        stacked: true
      }
    })
    expect(() => ava.unmount()).not.toThrow()
  })
})