Comments (15)
I think we should just add support for refs at the moment βΊ
from vue-test-utils.
@eddyerburgh To make it a little more concise, how do you feel about:
find({ ref: 'myRefName' })
from vue-test-utils.
Ah that's a good point.
If we add this then we need to:
- Update all methods that take a selector:
is
,contains
,find
,findAll
- Update the selectors page to include the refs object
- Link to the selectors page in the validation error
That's a fairly big change. Before we go further, I would like some input from others.
Do we want to extend the selector to include { refs: 'refName' }
from vue-test-utils.
I think this is a good idea, but I don't think we should add an extra method.
We could extend find
and findAll
, so that they could take a selector
object.
find({
selector: 'refs',
value: 'value'
})
Then we could extend it to other selectors, like props
.
find({
selector: 'props',
value: 'value'
})
from vue-test-utils.
I wonder how many alternate use cases we would have for a selector other than CSS, component name, or $ref. I'm not sure if component with prop: x
would ever be used as a selector, but I could be wrong.
from vue-test-utils.
But, if we do want to go with the selector/value find/findAll functions, I could start a PR. Initially it could look for $props / $refs. I guess the tough part would be matching $props
because the values could be any
from vue-test-utils.
Yep that looks good π
from vue-test-utils.
Great, updating the PR to reflect this. Currently, the validation error messages for find/findAll display: wrapper.find/findAll() must be passed a valid CSS selector or a Vue constructor
. As we update the API to accept this new options object, how should we refer to it?
If we're going to start with refs for now, we could use:
wrapper.find() must be passed a valid CSS selector, Vue constructor, or ref object
Or wrapper.find() must be passed a valid CSS selector, Vue constructor, or options object
My only concern with the latter is that it may be too vague.
from vue-test-utils.
So, one thing other thing to note: When selecting $refs, we rely on the $ref property to be available on the wrapper.vm, because we want to limit the results to this scope. This is one of the benefits of $refs. If we are using a wrapper on a non-Vue HTML Element, we should not allow selecting by $ref.
from vue-test-utils.
from vue-test-utils.
The PR for this change mentioned wanting some feedback from the community, so I thought I'd chime in.
This would be great to have, I liked the initial suggestion of having wrapper.ref
, but I understand from a consistency standpoint why you'd want to extend the current finders. The current recommendation of using wrapper.find({refs: 'refName'})
feels comfortable to me.
from vue-test-utils.
Thanks for the feedback @skray.
I'm happy for this work to continue. @matt-oconnell do you have any blockers?
from vue-test-utils.
This is pretty much fully implemented in the corresponding PR. The blocker was that the Flow types were invalid (specifically Component
,) so this PR fails the type check unless any
is used
from vue-test-utils.
I think we'll have to use any until proper flowtypes are exported from Vue β vuejs/vue#5027
from vue-test-utils.
This can be closed, released in 1.0.0-beta.5
from vue-test-utils.
Related Issues (20)
- Computed value does not update when data updates
- isVisible() not seeing display: none using vitest with jsdom HOT 4
- Testing component with onBeforeRouteLeave hook raising "No active route record was found" warning HOT 1
- vue2 εΌε ₯ element2. ι‘΅ι’εε¨table θ‘¨ζ Ό jest ζ΅θ―ζ₯ι HOT 1
- *.svg?inline issues
- Errors in `setup()` are silent if `render()` throws an error HOT 6
- Check style changes on hover HOT 1
- setData on writable computed property does not seem to work as it does in VTU.1
- classes documentation
- Support Vue 2.7.16 HOT 2
- Vue test utils not updating template when testing composables
- TypeError: $setup.mergeProps is not a function
- Data property is already defined in Props. HOT 1
- Unable to use vitest spy within vue/nuxt 3 component methods. HOT 3
- `findComponent` doesn't find anything when using `@vue/compat` HOT 1
- Components with TS generic HOT 1
- event.keyCode is deprecated
- Change mocks mid-test
- While testing out mixins, the $refs cannot be modified and due to which the testing cannot occur.
- This import pattern causes imported component to be undefined in tests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-test-utils.