feat: Add getByTestId utility #10
Conversation
Codecov Report
@@ Coverage Diff @@
## master #10 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 1 1
Lines 6 10 +4
Branches 0 1 +1
=====================================
+ Hits 6 10 +4
Continue to review full report at Codecov.
|
README.md
Outdated
| expect(hiddenItemElement).toBeFalsy() // we just care it doesn't exist | ||
| ``` | ||
|
|
||
| #### `getByTestId` |
There was a problem hiding this comment.
Let's move this above queryByTestId to indicate that it's recommended.
README.md
Outdated
| ``` | ||
|
|
||
| ## More on `data-testid`s | ||
|
|
||
| The `queryByTestId` utility is referring to the practice of using `data-testid` | ||
| The `queryByTestId` and `getByTestId` utilities refer to the practice of using `data-testid` |
There was a problem hiding this comment.
Swap the order here to give preferential treatment to getByTestId
README.md
Outdated
| @@ -286,7 +299,7 @@ Or you could include the index or an ID in your attribute: | |||
| <li data-testid={`item-${item.id}`}>{item.text}</li> | |||
| ``` | |||
|
|
|||
| And then you could use the `queryByTestId`: | |||
| And then you could use the `queryByTestId` utility: | |||
There was a problem hiding this comment.
Could you switch this to getByTestId?
Also, could you add a FAQ for: What if I want to verify that an element does NOT exist? Where we show how to use queryByTestId as well as container.querySelector as possible solutions.
|
Thanks, @kentcdodds I'll implement your suggestions this afternoon. |
| function getByTestId(div, id) { | ||
| const el = queryByTestId(div, id) | ||
| if (!el) { | ||
| throw new Error(`Unable to find element by ${select(id)}`) |
There was a problem hiding this comment.
@kentcdodds Oops! If now getByTestId throws error, then not of toBeInTheDOM (which I'm working on it) wouldn't make sense right? Because people will use toThrowError for their assertion instead of not. So toBeInTheDOM is only for +ve case.
There was a problem hiding this comment.
Yeah, I'd thought of that. It still works for queryByTestId though.
…ary#10) * feat(waitForElements): add implementation, tests, docs Add `mutationobserver-shim` to `devDependencies` to provide `MutationObserver` in jest tests where `jsdom` has no built-in support for it: jsdom/jsdom#639 * docs(contributors): update sompylasar * CR changes - rename `waitForElements` to `waitForElement` - move `mutationobserver-shim` to dependencies, import from `waitForElement` to provide the polyfill to the users of `dom-testing-library` - fix `kcd-scripts` version to match `master` branch - add synchronous `callback` call to detect an element if it's already present before any DOM mutation happens - add/change tests about synchronous `callback` call - tweak variable names in docs examples - add docs about the default `container` option value - add docs example about querying multiple elements - add docs about the `mutationobserver-shim` polyfill - add docs link and anchor to `mutationObserverOptions` - add docs link to MDN from the second mention of `MutationObserver` * fix(waitForElement): ensure it works with default callback Should wait for the next DOM change, as advertised in the docs. The default value is `undefined` so that the `options` object can be used while still keeping the default callback: ``` waitForElement(undefined, {attributes: true}) ``` * CR: tweak docs examples for wait and waitForElement - use `container` in the examples as this is a more popular use case than the default value of global `document` - use full sentences with capital first letter and period in the example comments * CR: rename files to kebab-case * CR: await promise -> return promise @kentcdodds: > Rather than `await promise`, I'd prefer `return promise`. Maybe I'm being irrational here, but it feels better to me. @sompylasar: > I'm changing this, but if this line was the only one with `await` expression, then `eslint` would say `async` function must have an `await`. We are lucky that there are more `await`s in all the tests. > > P.S. I don't agree with this rule because `async` functions have their use for the error handling; `async` function is just the one that is wrapped in a `return new Promise(...)`. * CR: shorter timeouts and wait times for quicker tests
✏️ docs: add license
What:
This adds the
getByTestIdutility function.Why:
To work better with typical use case of expecting queried elements to exist instead of potentially being null.
How:
queryByTestIdstill exists and still can return null, butgetByTestIdis added that will throw an Error instead of returning null. For consumers using Flow or TypeScript, using this new function will not complain about directly using the returned element, since it cannot returnnull.Checklist: