diff --git a/tests/__tests__/within.js b/tests/__tests__/within.js new file mode 100644 index 00000000..e23a0085 --- /dev/null +++ b/tests/__tests__/within.js @@ -0,0 +1,34 @@ +import { render, within } from '@testing-library/vue' + +test('within() returns an object with all queries bound to the DOM node', () => { + const { getByTestId, getByText } = render({ + template: ` +
+

repeated text

+
repeated text
+
+ ` + }) + + // getByText() provided by render() fails because it finds multiple elements + // with the same text (as expected). + expect(() => getByText('repeated text')).toThrow( + 'Found multiple elements with the text: repeated text' + ) + + const divNode = getByTestId('div') + + // within() returns queries bound to the provided DOM node, so the following + // assertion passes. Notice how we are not using the getByText() function + // provided by render(), but the one coming from within(). + within(divNode).getByText('repeated text') + + // Here, proof that there's only one match for the specified text. + expect(divNode).toMatchInlineSnapshot(` +
+ repeated text +
+ `) +})