pedropaulodf / ignite-ignews

ig.news é o terceiro projeto criado no chapter 3 da trilha de React do Ignite da Rocketseat. O projeto consiste num blog onde para ler algum psoto você deverá ser assinante, e é usado a API do Stripe para o controle de pagamento e salvando os dados dos inscritos no FaunaDB.

👋 Ig.News

Projeto criado no treinamento Ignite da Rocketseat

Ig.News é o terceiro projeto criado no chapter 3 da trilha de React do Ignite da Rocketseat. O projeto consiste num blog onde para ler algum psoto você deverá ser assinante, e é usado a API do Stripe para o controle de pagamento e salvando os dados dos inscritos no FaunaDB.

Ver projetos:

🚀 Tecnologias

• ReactJS
• NextJS
• TypeScript
• SASS
• Next-Auth
• Stripe
• Stripe CLI
• FaunaDB
• Prismic CMS
• Jest (Testes unitários de componentes e páginas)
• testing-library
• jest-mock

🧪 Anotações e lembretes sobre os TESTES

• A descrição do teste deve ser o mais descritivo possível.

• Como saber qual teste usar? screen.logTestingPlaygroundURL() Ele vai gerar uma URL no console para poder testar no browser.

• Quando for testar projeto Next.js, configurar o arquivo babel.config.js

• Padrões de nomes: ComponentName.spec.tsx

• Lib para ajudar no reconhecimento de arquivos de estilo .module: identity-obj-proxy | Sobre essa lib, ver configuração no arquivo: jest.config.js

• O mock() server para todo os testes no arquivo dele. E tem que ir "mockando" todos os recursos usados nos componentes testado e seus filhos.

• A função debug() faz mostrar o HTML gerado pelo teste.

const { debug } = render()
debug()

• A função describe() serve para organizar os testes e categorizá-los.

• Pode-se usar test() ou it() para criar um teste, mas o it() é ideal usar dentro de um describe().

• Dependências para os testes com next.js e outros:

yarn add jest jest-dom @testing-library/jest-dom @testing-library/dom @testing-library/react babel-jest -D

• Modelo de configuração do arquivo jest.config.js:

module.exports = {
  // Pastas a serem ignoradas pelos testes
  testPathIgnorePatterns: ["/node_modules/", "/.next/", "/.vercel/", "/.github/"],
  // Arquivo onde está configurado o teste
  setupFilesAfterEnv: ["<rootDir>/src/tests/setupTests.ts"],
  // Atributo que informa quais tipos de arquivos devem ser convertidos em JavaScript
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
  },
  // O atributo abaixo indica qual ambiente o teste está rodando
  testEnvironment: 'jsdom',
  // Atributo referente a lib identity-obj-proxy
  moduleNameMapper: {
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
  }

  // PARA GERAR pasta COVERAGE e ver no browser

  collectCoverage: true,
  collectCoverageFrom: [
    "src/**/*.{js,jsx,ts,tsx}",
    "!src/**/*.spec.tsx",
    "!src/**/_app.tsx",
    "!src/**/_document.tsx",
  ],
  coverageReporters: ["lcov", "json"],
};

• Usar a biblioteca jest-mock para mockar valores diferentes para testes diferentes: yarn add jest-mock -D

• expect.objectContaining({}) faz com que o teste verifique apenas se o teste possui os dados do objeto, se retirar, o teste verificar se o objeto é totalmente igual ao informado.

• Comandos para testes assíncronos. Parece que o Jest tem cerca de 1s (1000) de delay padrão para verificar:

// findByText(() => {}, {}, { interval: 3000 ...options });
expect(await screen.findByText('ButtonText', {}, { timeout: 1400 }))

// waitFor(() => {},{ interval: 3000 ...options });
await waitFor(() => {
  return expect(screen.getByText('ButtonText')).toBeInTheDocument();
})
// Ou se for esperar o componente sair da tela
await waitFor(() => {
  return expect(screen.queryByText('ButtonText')).toBeInTheDocument();
})

// waitForElementToBeRemoved(() => {}, { interval: 3000 ...options })
await waitForElementToBeRemoved(screen.queryByText('ButtonText'), {})