Testando o que os usuários realmente veem com Vitest e Chromatic | Codrops

Nota do editor: Hoje, nossos amigos da Chromatic estão compartilhando uma prévia de seu novo plugin de teste visual para Viteste. Temos o prazer de apresentar este artigo convidado de Kyle Gach, que explica como os testes visuais complementam os testes de componentes tradicionais e ajudam a detectar regressões da IU antes que cheguem à produção.

Seu PR para inserir um botão “adicionar aos favoritos” é verde. Todo teste automatizado é aprovado. CI não relata falhas.

Em seguida, um usuário relata que o cartão do produto não parece correto em seu telefone.

O conjunto de testes verificou a lógica do componente, mas perdeu o estado renderizado que o usuário viu: o ponto de interrupção, o espaçamento, o encapsulamento e o layout pintado final.

Seus testes Vitest não conseguem ver sua IU. Os testes visuais fecham essa lacuna.

É por isso que estamos abrindo o acesso antecipado ao nosso novo plugin Chromatic para Vitest.

Visual componente testes são perfeitos para desenvolvimento de UI

Testes visuais são mais fáceis de escrever e manter do que os tradicionais testes de componentes. Ao mesmo tempo, proporcionam mais confiança porque testam mais.

Um teste de componente tradicional para um cartão de produto pode verificar se o título e o preço corretos são renderizados e se o CTA tem o texto correto e é clicável. Os testes visuais vão além disso e verificam se cada detalhe da aparência do cartão está correto: as fontes em uso, cores, espaçamento, layout, pontos de interrupção, etc.

Ao adicionar testes visuais aos seus testes Vitest, você obtém o melhor dos dois mundos: afirmações regulares para comportamento interativo e saída não visual, como propriedades de acessibilidade, além de testes visuais para aparência. Os usuários se preocupam com ambos, por isso devemos testar ambos.

Teste visual com Vitest e Chromatic

Se você estiver testando seus componentes com o modo de navegador do Vitest, o plugin cromático pode adicionar testes visuais sem alterações necessárias em seu arquivos de teste .

Como funciona?

Começar é tão simples quanto registrar o plugin na configuração do Vitest:

// vitest.config.ts
import { defineProject } from 'vitest/config';
import { playwright } from '@vitest/browser-playwright';
import { chromaticPlugin } from '@chromatic-com/vitest/plugin'; 

export default defineProject({
  plugins: [chromaticPlugin()], // 👈 Add this; no test file changes required
  test: {
    browser: {
      provider: playwright(),
      enabled: true,
      instances: [{ browser: 'chromium' }],
    },
  },
});

Com o plugin instalado, a execução de um teste coletará o resultado renderizado em final de cada teste. (Você também pode coletar a saída renderizada em pontos arbitrários durante um teste.)

Em seguida, você executa o Chromatic, que carrega esses resultados para a nuvem, tira instantâneos em paralelo, calcula suas diferenças, localiza e reduz automaticamente o flake e, finalmente, relata o resultado como uma verificação de PR.

A última etapa é a revisão. Você aprova as diferenças que parecem corretas e rejeita as que não parecem. Em seguida, envie as alterações para corrigir os snapshots rejeitados até que você consiga aprovar tudo e mesclar seu PR.

Como o Chromatic é diferente do teste visual do Vitest?

Vitest oferece um recurso de teste visual integrado, que também requer o Modo Navegador. Ele tira capturas de tela dos resultados do seu teste e produz diferenças para revisão. A principal diferença é que ele armazena essas capturas de tela em seu repositório, o que significa que você deve armazená-las com git e gerenciar atualizações. Você também deve fornecer o ambiente para capturar essas capturas de tela, o que é difícil de manter estável, porque pode variar de acordo com o sistema operacional, navegador, fontes instaladas, localidade, etc.

Chromatic, por outro lado, coleta o resultado renderizado de seus testes localmente, mas captura os instantâneos visuais reais em um ambiente de nuvem estável. Isso oferece vários benefícios:

• Linhas de base com reconhecimento de ramificação rastreie ramificações principais e de recursos para você, para que você não precise armazená-las no git.
• Renderização em nuvem tira snapshots em uma plataforma controlada e consistente para reduzir falhas ambientais
• SteadySnap estabiliza instantâneos em relação à animação, variação de carregamento e tempo de captura.
• Snapshot paralelo executa seus testes visuais o mais rápido possível
• Cromático coleta o HTML renderizado, CSS e ativos por trás de cada captura de tela, para que você possa inspecionar o DOM e reproduzir falhas sem executar testes localmente.

Ou, para resumir com uma tabela:

Obtenha acesso antecipado

Estamos abrindo o acesso antecipado ao plugin Chromatic para equipes que já usam o Vitest Browser Mode ou estão movendo ativamente testes de componentes para lá. A versão beta é privada, com integração prática para um número limitado de equipes e instantâneos gratuitos durante a avaliação do produto.

Traga um repositório real e validaremos a coleção do modo navegador, o comportamento do CI, a revisão de PR, as linhas de base da ramificação e a depuração juntos. As equipes de acesso antecipado podem influenciar o produto antes do lançamento, com acesso prioritário à medida que a versão beta se expande.

Esta é uma boa opção se sua equipe já usa o Vitest para testes de componentes, começou a adotar o Modo Navegador e deseja cobertura de regressão visual sem construir infraestrutura de captura de tela em torno da API integrada.

Requer Vitest Modo navegador usando Playwright. Acompanharemos os detalhes de integração.