Skip to content

chore(index): exposing Stubs type for declaration files #2492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 14, 2024

Conversation

joaoprp
Copy link
Contributor

@joaoprp joaoprp commented Aug 13, 2024

Exposes Stubs over index.d.ts for ease of use on developers.

Being Stubs an existing type on test-utils, and having to import declarations on test files, this PR helps to remove boilerplate to always declare something along the lines of:

import { RouterLinkStub } from '@vue/test-utils';

interface SetupProps {
  props: MyComponentProps;
  stubs: Record<string, boolean | typeof RouterLInkStub>;
}

function setup({ props = {}, stubs = {} }: SetupProps = {}) {
  render(MyComponent, {
    global: { stubs },
    props,
  });
}


test('something', () => {
  setup({ stubs: { 'router-link': RouterLinkStub, MyModal: true } });

  expect(screen.getByText('foo')).toBeDefined();
});

or setting up manually Component or DIrective types from vue itself:

import { RouterLinkStub } from '@vue/test-utils';
import { Component, Directive } from 'vue';

interface SetupProps {
  props: MyComponentProps;
  stubs: Record<string, boolean | Component | Directive>;
}

function setup({ props = {}, stubs = {} }: SetupProps = {}) {
  render(MyComponent, {
    global: { stubs },
    props,
  });
}


test('something', () => {
  setup({ stubs: { 'router-link': RouterLinkStub, MyModal: true } });

  expect(screen.getByText('foo')).toBeDefined();
});

In this second case, this Record<string, boolean | Component | Directive>, is basically what type Stubs is:

export type Stub = boolean | Component | Directive
export type Stubs = Record<string, Stub> | Array<string>

That could simplify the import boilerplate into:

import { RouterLinkStub, Stubs } from '@vue/test-utils';

interface SetupProps {
  props: MyComponentProps;
  stubs: Stubs;
}

function setup({ props = {}, stubs = {} }: SetupProps = {}) {
  render(MyComponent, {
    global: { stubs },
    props,
  });
}


test('something', () => {
  setup({ stubs: { 'router-link': RouterLinkStub, MyModal: true } });

  expect(screen.getByText('foo')).toBeDefined();
});

for a cleaner experience.

Copy link

netlify bot commented Aug 13, 2024

Deploy Preview for vue-test-utils-docs ready!

Name Link
🔨 Latest commit 51fa18a
🔍 Latest deploy log https://app.netlify.com/sites/vue-test-utils-docs/deploys/66bbe395fd9f9b0008551605
😎 Deploy Preview https://deploy-preview-2492--vue-test-utils-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@cexbrayat cexbrayat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thanks for the PR!

@cexbrayat cexbrayat merged commit e96bc09 into vuejs:main Aug 14, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants