+> Como foi instalar o Vitest? Foi simples? Deu trabalho?
-- Pesquisa de Usuários
+- Passo a passo:
+ - Instalar os pacotes
-https://user-images.githubusercontent.com/15758789/225418343-6df0c6b2-0182-4c5e-82ae-4fd76413edf2.mov
+ ```shell
+ npm i -D vitest @vitejs/plugin-react @testing-library/react @testing-library/dom @testing-library/user-event
+ ```
-- Pesquisa de Repositórios
+ - Criar o arquivo de configuração `vitest.config.ts`:
-https://user-images.githubusercontent.com/15758789/225419746-2c7b020c-89c6-4ec5-bbad-622a84a92524.MP4
+ ```javascript
+ import react from '@vitejs/plugin-react'
+
+ import { defineConfig } from 'vitest/config'
+
+ export default defineConfig({
+ plugins: [react()],
+ test: {
+ globals: true,
+ environment: 'jsdom'
+ }
+ })
+
+ ```
+
+ - Configurar o `tsconfig.json` para enxergar os tipos globais, adicione a linha abaixo dentro do objeto `compilerOptions`
+
+ ```json
+ "types": ["vitest/globals"]
+ ```
+
+ - Adicionar scripts no `package.json`
+
+ ```json
+ {
+ "test": "vitest",
+ "coverage": "vitest run --coverage"
+ }
+ ```
+
+ - Agora rode o comando
+
+ ```shell
+ npm run test
+ ```
+
+ - Vai ver o seguinte erro
+
+ 
+
+ - O vitest não vai conseguir entender os caminhos com `aliases` (`@/...`) que configuramos no init do Next, então precisamos adicionar seguinte trecho de código no objeto `test` do `vitest.config.js` pra resolver esse problema:
+
+ ```javascript
+ alias: {
+ '@': path.resolve(__dirname, './src')
+ },
+ ```
+
+ - O arquivo deve ficar assim:
+
+ ```javascript
+ import { defineConfig } from 'vitest/config'
+
+ import path from 'path'
+ import react from '@vitejs/plugin-react'
+
+ export default defineConfig({
+ plugins: [react()],
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ alias: {
+ '@': path.resolve(__dirname, './src')
+ },
+ }
+ })
+ ```
+
+ - Depois disso, tudo deve "funcionar", digo isso pois os problemas com o Vitest acabaram, mas temos que resolver os problemas com dependencias (esses problemas nos acompanham em qualquer framework). Como fizemos com o Jest, vamos fazer aqui, criar um arquivo com um `customRender()` que irá ter um Wrapper com os providers do projeto (React Query, NextRouter, etc) e o mock do NextRouter.
+
+ 
+
+ ```tsx
+ // test/index.tsx
+
+ import type { PropsWithChildren } from 'react'
+
+ import user from '@testing-library/user-event'
+ import { render as rtlRender, RenderOptions } from '@testing-library/react'
+
+ import { NextRouter } from 'next/router'
+ import { RouterContext } from 'next/dist/shared/lib/router-context'
+
+ import { createRouterMock } from './mocks/createRouterMock'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+ type TestWrapperProps = {
+ router?: Partial
-
{repo.description ?? 'Sem descrição'}
-
Usuário desde:{' '} - {new Date(user.created_at).toLocaleString('pt-BR')} + {new Date(user.created_at ?? '').toLocaleString( + 'pt-BR' + )}
diff --git a/src/types/github.d.ts b/src/types/github.d.ts index 6b2d177..4d4cdfa 100644 --- a/src/types/github.d.ts +++ b/src/types/github.d.ts @@ -1,152 +1,152 @@ export type GitHubUser = { - login: string - id: number - node_id: string - avatar_url: string - gravatar_id: string - url: string - html_url: string - followers_url: string - following_url: string - gists_url: string - starred_url: string - subscriptions_url: string - organizations_url: string - repos_url: string - events_url: string - received_events_url: string - type: string - site_admin: boolean - name: string - company: string - blog: string - location: string - email?: any - hireable: boolean - bio: string - twitter_username: string - public_repos: number - public_gists: number - followers: number - following: number - created_at: Date - updated_at: Date -} + login: string | null; + id: number | null; + node_id: string | null; + avatar_url: string | null; + gravatar_id: string | null; + url: string | null; + html_url: string | null; + followers_url: string | null; + following_url: string | null; + gists_url: string | null; + starred_url: string | null; + subscriptions_url: string | null; + organizations_url: string | null; + repos_url: string | null; + events_url: string | null; + received_events_url: string | null; + type: string | null; + site_admin: boolean | null; + name: string | null; + company: string | null; + blog: string | null; + location: string | null; + email?: any | null; + hireable: boolean | null; + bio: string | null; + twitter_username: string | null; + public_repos: number | null; + public_gists: number | null; + followers: number | null; + following: number | null; + created_at: Date | null; + updated_at: Date | null; +}; export interface RepositoryOwner { - login: string - id: number - node_id: string - avatar_url: string - gravatar_id: string - url: string - html_url: string - followers_url: string - following_url: string - gists_url: string - starred_url: string - subscriptions_url: string - organizations_url: string - repos_url: string - events_url: string - received_events_url: string - type: string - site_admin: boolean + login: string; + id: number; + node_id: string; + avatar_url: string; + gravatar_id: string; + url: string; + html_url: string; + followers_url: string; + following_url: string; + gists_url: string; + starred_url: string; + subscriptions_url: string; + organizations_url: string; + repos_url: string; + events_url: string; + received_events_url: string; + type: string; + site_admin: boolean; } export interface License { - key: string - name: string - spdx_id: string - url: string - node_id: string + key: string | null; + name: string | null; + spdx_id: string | null; + url: string | null; + node_id: string | null; } export interface GitHubRepository { - id: number - node_id: string - name: string - full_name: string - private: boolean - owner: RepositoryOwner - html_url: string - description?: any - fork: boolean - url: string - forks_url: string - keys_url: string - collaborators_url: string - teams_url: string - hooks_url: string - issue_events_url: string - events_url: string - assignees_url: string - branches_url: string - tags_url: string - blobs_url: string - git_tags_url: string - git_refs_url: string - trees_url: string - statuses_url: string - languages_url: string - stargazers_url: string - contributors_url: string - subscribers_url: string - subscription_url: string - commits_url: string - git_commits_url: string - comments_url: string - issue_comment_url: string - contents_url: string - compare_url: string - merges_url: string - archive_url: string - downloads_url: string - issues_url: string - pulls_url: string - milestones_url: string - notifications_url: string - labels_url: string - releases_url: string - deployments_url: string - created_at: Date - updated_at: Date - pushed_at: Date - git_url: string - ssh_url: string - clone_url: string - svn_url: string - homepage?: any - size: number - stargazers_count: number - watchers_count: number - language?: any - has_issues: boolean - has_projects: boolean - has_downloads: boolean - has_wiki: boolean - has_pages: boolean - has_discussions: boolean - forks_count: number - mirror_url?: any - archived: boolean - disabled: boolean - open_issues_count: number - license?: License - allow_forking: boolean - is_template: boolean - web_commit_signoff_required: boolean - topics: any[] - visibility: string - forks: number - open_issues: number - watchers: number - default_branch: string - score: number + id: number; + node_id: string; + name: string; + full_name: string; + private: boolean; + owner: RepositoryOwner; + html_url: string; + description?: any; + fork: boolean; + url: string; + forks_url: string; + keys_url: string; + collaborators_url: string; + teams_url: string; + hooks_url: string; + issue_events_url: string; + events_url: string; + assignees_url: string; + branches_url: string; + tags_url: string; + blobs_url: string; + git_tags_url: string; + git_refs_url: string; + trees_url: string; + statuses_url: string; + languages_url: string; + stargazers_url: string; + contributors_url: string; + subscribers_url: string; + subscription_url: string; + commits_url: string; + git_commits_url: string; + comments_url: string; + issue_comment_url: string; + contents_url: string; + compare_url: string; + merges_url: string; + archive_url: string; + downloads_url: string; + issues_url: string; + pulls_url: string; + milestones_url: string; + notifications_url: string; + labels_url: string; + releases_url: string; + deployments_url: string; + created_at: Date; + updated_at: Date; + pushed_at: Date; + git_url: string; + ssh_url: string; + clone_url: string; + svn_url: string; + homepage?: any; + size: number; + stargazers_count: number; + watchers_count: number; + language?: any; + has_issues: boolean; + has_projects: boolean; + has_downloads: boolean; + has_wiki: boolean; + has_pages: boolean; + has_discussions: boolean; + forks_count: number; + mirror_url?: any; + archived: boolean; + disabled: boolean; + open_issues_count: number; + license?: License; + allow_forking: boolean; + is_template: boolean; + web_commit_signoff_required: boolean; + topics: any[]; + visibility: string; + forks: number; + open_issues: number; + watchers: number; + default_branch: string; + score: number; } export interface RepositoriesResponse { - total_count: number - incomplete_results: boolean - items: GitHubRepository[] + total_count: number; + incomplete_results: boolean; + items: GitHubRepository[]; } diff --git a/test/index.tsx b/test/index.tsx new file mode 100644 index 0000000..f923711 --- /dev/null +++ b/test/index.tsx @@ -0,0 +1,40 @@ +import type { PropsWithChildren } from 'react' + +import user from '@testing-library/user-event' +import { render as rtlRender, RenderOptions } from '@testing-library/react' + +import { NextRouter } from 'next/router' +import { RouterContext } from 'next/dist/shared/lib/router-context' + +import { createRouterMock } from './mocks/createRouterMock' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + +type TestWrapperProps = { + router?: Partial