await render(AppComponent, {
  componentProviders: [AppComponentService],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {detectChanges: false})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {
  declarations: [CustomerDetailComponent, ButtonComponent],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {
  declarations: [ChildComponent],
  routes: [
    {
      path: '',
      children: [
        {
          path: 'child/:id',
          component: ChildComponent,
        },
      ],
    },
  ],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(SpoilerDirective, {
  template: `<div spoiler message='SPOILER'></div>`,
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import {configure, screen} from '@testing-library/testcafe'

fixture`configure`.clientScripts(
  configure({testIdAttribute: 'data-automation-id'}),
).page`http://localhost:13370`

test('supports alternative testIdAttribute', async t => {
  await t.click(screen.getByTestId('image-with-random-alt-tag'))
})

test('still works after browser page load and reload', async t => {
  await t.click(screen.getByText('Go to Page 2'))

  await t.eval(() => location.reload(true))

  await t
    .click(screen.getByTestId('page2-thing'))
    .expect(screen.getByText('second page').exists)
    .ok()
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">configure</span><span class="token punctuation">(</span><span class="token parameter">options<span class="token operator">:</span> Partial<span class="token operator">&lt;</span>Options<span class="token operator">></span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    content<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">import</span> configure</code></pre>

import {within, screen} from '@testing-library/testcafe'

fixture`within`.page`http://localhost:13370`

test('works with getBy* selectors', async t => {
  await t
    .expect(
      within(screen.getByTestId('nested')).getByText('Button Text').exists,
    )
    .ok()
})

test('works with CSS selector strings', async t => {
  const {getByText} = await within('#nested')
  await t.click(getByText('Button Text')).ok()
})

test('works on any testcafe selector', async t => {
  const nested = Selector('#nested')

  await t.expect(within(nested).getByText('Button Text').exists).ok()
})

test('works with results from "byAll" query with index - regex', async t => {
  const nestedDivs = screen.getAllByTestId(/nested/)
  await t.expect(nestedDivs.count).eql(2)

  await t
    .expect(within(nestedDivs.nth(0)).getByText('Button Text').exists)
    .ok()
    .expect(
      within(nestedDivs.nth(1)).getByText('text only in 2nd nested').exists,
    )
    .ok()
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">within</span><span class="token punctuation">(</span><span class="token parameter">selector<span class="token operator">:</span> SelectorArg</span><span class="token punctuation">)</span><span class="token operator">:</span> WithinSelectors
<span class="token keyword">import</span> within</code></pre>

const {rerender} = await render(Counter, {componentProperties: {count: 4}})

expect(screen.getByTestId('count-value').textContent).toBe('4')

rerender({count: 7})

expect(screen.getByTestId('count-value').textContent).toBe('7')
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> rerender<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const {debug} = await render(AppComponent)

debug()
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> debug<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const {getByText, queryByLabelText} = await render(AppComponent)

getByText('Hello world')
queryByLabelText('First name:')
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> getByText<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>