Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add QwikCityMockProvider explanation #5505

Merged
merged 2 commits into from
Dec 1, 2023
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
34 changes: 34 additions & 0 deletions packages/docs/src/routes/docs/(qwikcity)/api/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,40 @@ export default component$(() => {

> `QwikCityProvider` does not render any DOM element, not even the matched route, it merely initializes Qwik City core logic, because of this reason, it should not be used more than once in the same app.


## `<QwikCityMockProvider>`

The `QwikCityMockProvider` component initializes a Qwik City context for testing. It provides the necessary context for Qwik City code to work in tests, such as [`useContent()`](/docs/(qwikcity)/api/index.mdx#usecontent). Vice versa for `useNavigate()`, `<Link>`, `useLocation()` and so on.
It is recommended that you use this in your test files.

> `QwikCityMockProvider` does not render any DOM elements, meaning it won't be visible in snapshots

If you are looking for a general example on how to integrate vitest into your Qwik look checkout the [vitest integration documentation](/docs/integrations/vitest/index.mdx)

```tsx title="src/components/card.spec.tsx"
import { createDOM } from '@builder.io/qwik/testing';
import { QwikCityMockProvider } from '@builder.io/qwik-city';
import { test, expect } from 'vitest';

// Component with two props. Uses <Link> internally. Omitted for brevity
import { Card } from './card';

const cases = [
{text: 'qwik', link:'https://qwik.builder.io/docs/api'},
{text: 'vitest', link: 'https://vitest.dev'}
];

test.each(cases)('should render card with %s %s', async ({text, link}) => {
const { screen, render } = await createDOM();
await render(
<QwikCityMockProvider>
<Card text={text} link={link} />
</QwikCityMockProvider>,
);
expect(screen.innerHTML).toMatchSnapshot();
});
```

## `<RouterOutlet>`

The `RouterOutlet` component is responsible for rendering the matched route at a given moment, it uses internally the [`useContent()`](/docs/(qwikcity)/api/index.mdx#usecontent) to render the current page, as well as all the nested layouts.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ npm run qwik add vitest
```

After running the command, vitest will be installed and a new component will be added to your project. The component will be added to the `src/components/example` directory as long as a new unit test is named `example.spec.ts`.
If you are looking for an example for a Component with QwikCity checkout [QwikCityMockProvider](/docs/api/index.mdx#QwikCityMockProvider)

```tsx title="example.spec.ts"
import { createDOM } from '@builder.io/qwik/testing';
Expand Down