Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions docs/api/wrapper/is.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
## is

::: warning Deprecation warning
Using `is` to assert that DOM node or `vm` matches selector is deprecated and will be removed.
Using `is` to assert that wrapper matches DOM selector is deprecated and will be removed.

Consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers).
For such use cases consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#custom-matchers).
or for DOM element type assertion use native [`Element.tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName) instead.

To keep these tests, a valid replacement for:

- `is('DOM_SELECTOR')` is a assertion of `wrapper.element.tagName`.
- `is('DOM_SELECTOR')` is an assertion of `wrapper.element.tagName`.
- `is('ATTR_NAME')` is a truthy assertion of `wrapper.attributes('ATTR_NAME')`.
- `is('CLASS_NAME')` is a truthy assertion of `wrapper.classes('CLASS_NAME')`.

Assertion against component definition is not deprecated

When using with findComponent, access the DOM element with `findComponent(Comp).element`
:::

Expand Down
11 changes: 8 additions & 3 deletions packages/test-utils/src/wrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -321,13 +321,18 @@ export default class Wrapper implements BaseWrapper {
}

/**
* Checks if node matches selector
* @deprecated
* Checks if node matches selector or component definition
*/
is(rawSelector: Selector): boolean {
warnDeprecated('is', 'Use element.tagName instead')
const selector = getSelector(rawSelector, 'is')

if (selector.type === DOM_SELECTOR) {
warnDeprecated(
'checking tag name with `is`',
'Use `element.tagName` instead'
)
}

if (selector.type === REF_SELECTOR) {
throwError('$ref selectors can not be used with wrapper.is()')
}
Expand Down
33 changes: 33 additions & 0 deletions test/specs/wrapper/is.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { compileToFunctions } from 'vue-template-compiler'
import { config } from 'packages/test-utils/src'
import ComponentWithChild from '~resources/components/component-with-child.vue'
import Component from '~resources/components/component.vue'
import ComponentWithoutName from '~resources/components/component-without-name.vue'
Expand All @@ -10,6 +11,17 @@ import {
} from '~resources/utils'

describeWithShallowAndMount('is', mountingMethod => {
let consoleErrorSave

beforeEach(() => {
consoleErrorSave = console.error
console.error = jest.fn()
})

afterEach(() => {
console.error = consoleErrorSave
})

it('returns true if root node matches tag selector', () => {
const compiled = compileToFunctions('<input />')
const wrapper = mountingMethod(compiled)
Expand Down Expand Up @@ -133,4 +145,25 @@ describeWithShallowAndMount('is', mountingMethod => {
expect(fn).toThrow(message)
})
})

it('warns when passing a string', () => {
const wrapper = mountingMethod(Component)

config.showDeprecationWarnings = true
wrapper.is('div')

expect(console.error.mock.calls[0][0]).toContain(
'[vue-test-utils]: checking tag name with `is` is deprecated'
)
config.showDeprecationWarnings = false
})

it('does not warn when passing a component definition', () => {
const wrapper = mountingMethod(Component)

config.showDeprecationWarnings = true
wrapper.is(Component)

expect(console.error).not.toHaveBeenCalled()
})
})