Merge pull request #88 from testing-library/within

Add within() test example

Author: dfcook

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: `
+      <div>
+        <p>repeated text</p>
+        <div data-testid="div">repeated text</div>
+      </div>
+    `
+  })
+
+  // 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(`
+    <div
+      data-testid="div"
+    >
+      repeated text
+    </div>
+  `)
+})