Skip to content

Changed recommendation for testing library #2306

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 3 commits into from
May 2, 2023

Conversation

NataliaTepluhina
Copy link
Member

@NataliaTepluhina NataliaTepluhina commented Mar 30, 2023

Description of Problem

As described in #2295, vue-testing-library has issued with testing async components with Suspense. We cannot recommend it over Vue Test Utils that deal with Suspense fine

Proposed Solution

Recommend VTU over testing library

Additional Information

Close #2295

@netlify
Copy link

netlify bot commented Mar 30, 2023

Deploy Preview for vuejs ready!

Name Link
🔨 Latest commit a531cdc
🔍 Latest deploy log https://app.netlify.com/sites/vuejs/deploys/64466150b5cc430008d4efbe
😎 Deploy Preview https://deploy-preview-2306--vuejs.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 settings.

Copy link
Contributor

@skirtles-code skirtles-code left a comment

Choose a reason for hiding this comment

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

I don't have much personal experience of working with either library, so I'm not really able to judge what the recommendation should be.

As Suspense is still considered experimental, I'm not sure whether @testing-library/vue should be expected to have proper support for it.

Comment on lines 189 to 195
cy.get(valueSelector)
.should('be.visible')
.and('contain.text', '0')
.get(buttonSelector)
.click()
.get(valueSelector)
.should('contain.text', '1')
Copy link
Contributor

Choose a reason for hiding this comment

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

Are these formatting changes intentional?

Copy link
Member Author

Choose a reason for hiding this comment

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

No, it was autoformatter. Removed the changes.

We recommend using `@testing-library/vue` for testing components in applications, as its focus aligns better with the testing priorities of applications. Use `@vue/test-utils` only if you are building advanced components that require testing Vue-specific internals.
- [`@testing-library/vue`](https://github.com/testing-library/vue-testing-library) is a Vue testing library focused on testing components without relying on implementation details. Built with accessibility in mind, its approach also makes refactoring a breeze. Its guiding principle is that the more tests resemble the way software is used, the more confidence they can provide.

We recommend using `@vue/test-utils` for testing components in applications, as its focus aligns better with the testing priorities of applications. `@testing-library/vue` has issues with testing asynchronous component with Suspense, so it should be used with caution.
Copy link
Contributor

Choose a reason for hiding this comment

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

The bit about how 'its focus aligns better with the testing priorities of applications' seemed specific to @testing-library/vue. Does it still make sense to have that comparison when switching the recommendation?

Copy link
Member Author

Choose a reason for hiding this comment

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

Makes sense, I've removed this bit

@NataliaTepluhina
Copy link
Member Author

@skirtles-code thank you for the review! I've addressed your comments, could you please take another look?

@NataliaTepluhina NataliaTepluhina merged commit acac67f into main May 2, 2023
@NataliaTepluhina NataliaTepluhina deleted the fix-testing-recommendations branch May 2, 2023 11:47
@pyoho-agn
Copy link

@NataliaTepluhina It may make sense to update the Recipe section at the bottom of this document with a @vue/test-utils example instead of a testing-library one. It's a bit confusing that there is a recommendation to use @vue/test-utils, but then have the largest example not use it. Apologies if this should be a new issue.

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.

revisit testing-library recommendation?
3 participants