Testes do Storybook e regressão visual
Execute funções play para testes de interação e integre o Chromatic para comparar diferenças visuais.
Testes do Storybook e regressão visual é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Por que testar no Storybook
O Storybook 7+ inclui @storybook/test para testes de interação (funções de execução) e integra-se ao Chromatic para testes automatizados de regressão visual — tudo isso sem sair do explorador de componentes.
Funções de execução
Uma função play é executada depois que a história é renderizada, simulando interações do usuário por meio dos utilitários de @storybook/test. Os resultados aparecem no painel de Interações.
import { within, userEvent, expect } from '@storybook/test';
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.type(canvas.getByLabelText('Email'), 'test@example.com');
await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
await expect(canvas.getByText('Success!')).toBeInTheDocument();
},
};Asserções em funções de execução
Use expect de @storybook/test (exportado novamente de Vitest/Jest) dentro das funções de execução para verificar o estado do componente após as interações.
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByRole('button', { name: /add/i });
await userEvent.click(button);
await expect(canvas.getByText('1 item')).toBeInTheDocument();
await userEvent.click(button);
await expect(canvas.getByText('2 items')).toBeInTheDocument();
},Executando testes de histórias com o executor de testes do Storybook
O pacote @storybook/test-runner transforma cada história com uma função de execução em um teste do Jest. Execute-os na CI com um único comando.
# Install
npm install @storybook/test-runner --save-dev
# package.json
"test-storybook": "test-storybook"
# Run (requires Storybook to be running)
npm run test-storybookO que são testes de regressão visual
Os testes de regressão visual registram capturas de tela dos componentes e sinalizam diferenças no nível dos pixels entre confirmações. Chromatic, Playwright e Percy são ferramentas populares.
Configurando o Chromatic
O Chromatic é a nuvem oficial do Storybook para testes visuais. Envie as histórias, e o Chromatic comparará as capturas de tela com a linha de base anterior.
# Install
npm install chromatic --save-dev
# Run (get project token from chromatic.com)
npx chromatic --project-token=<YOUR_TOKEN>
# CI: add to GitHub Actions
- name: Chromatic
run: npx chromatic --project-token=${{ secrets.CHROMATIC_TOKEN }}Revisando mudanças visuais
O Chromatic exibe uma interface de diferenças na qual os revisores aceitam ou rejeitam mudanças visuais. As mudanças aceitas tornam-se a nova linha de base; as rejeitadas bloqueiam o PR.
Testes de captura com o Storybook
O executor de testes também pode executar verificações de acessibilidade por meio de @storybook/addon-a11y automaticamente em todas as histórias na CI.
// .storybook/test-runner.ts
import { checkA11y } from 'axe-playwright';
export default {
async postVisit(page) {
await checkA11y(page, '#storybook-root', {
detailedReport: true,
});
},
};Composição do Storybook
Combine vários Storybooks de repositórios diferentes em uma única interface — isso é útil para sistemas de design compartilhados entre projetos.
// .storybook/main.ts
refs: {
'design-system': {
title: 'Design System',
url: 'https://design-system.example.com',
},
},Testando histórias responsivas
Use o complemento de área de visualização para testar histórias em tamanhos de celular, tablet e computador. Defina a área de visualização nos parâmetros da história para fixá-la em um tamanho específico.
export const Mobile: Story = {
parameters: {
viewport: { defaultViewport: 'mobile1' },
},
args: { label: 'Mobile Button' },
};Prevenção de testes instáveis
Evite testes visuais instáveis usando delay nas funções de execução para esperar pelas animações ou desativando as animações globalmente na visualização do Storybook.
// .storybook/preview.ts
export const parameters = {
chromatic: { disableSnapshot: false },
// Disable CSS animations for consistent screenshots
};
// Global CSS for tests:
// * { animation: none !important; transition: none !important; }Relatórios de cobertura
Execute test-storybook --coverage para gerar um relatório de cobertura que mostra quais linhas dos componentes são exercitadas pelos testes de funções de execução.
Verificação rápida
Onde a função de execução do Storybook executa suas interações?
Recapitulação
As funções de execução testam as interações dos componentes dentro do Storybook usando @storybook/test. O executor de testes transforma as funções de execução em testes do Jest para a CI. O Chromatic acrescenta capturas de regressão visual e sinaliza mudanças na interface no nível dos pixels para revisão antes da mesclagem.
Perguntas Frequentes
A aula “Testes do Storybook e regressão visual” é grátis?
Sim — o texto completo de “Testes do Storybook e regressão visual” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Testes do Storybook e regressão visual”?
Execute funções play para testes de interação e integre o Chromatic para comparar diferenças visuais. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Testes do Storybook e regressão visual”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configurando o Storybook em um projeto React
- Escrevendo histórias CSF3
- Args, controles e o complemento Actions
- Testes do Storybook e regressão visual