Usando o Storybook para desenvolver componentes React mais rápido

 import React from"react"; importar {BlogEntryListItem} de"./BlogEntryListItem"; export default { título:"BlogEntryListItem", componente: BlogEntryListItem,
}; export const BlogEntryListItemLoaded=()=> ( 
); export const BlogEntryListItemLongExcerpt=()=> ( 
); exportar const BlogEntryListItemLoading=()=> ;

 import React from"react"; export const BlogEntryListItem=(props)=> { if (props.loading) { return 
 Carregando... 
; } Retorna (      Publicado em: {props.date} 
 Última atualização: {props.lastUpdatedAt}   {props.excerpt}     );
};

, então vamos consertar isso usando overflow: hidden .

Olha! Melhoramos nosso componente sem nem mesmo pisar em nosso aplicativo principal. Podemos ir ainda mais longe usando alguns complementos que garantem que nosso componente seja ainda mais capaz.

Um dos add-ons com que o Storybook vem por padrão é Complemento de janela de visualização Storybook , que permite que você veja a aparência de seus componentes em vários tamanhos de tela.

Usar este complemento neste exemplo mostra que não podemos ler trechos no celular.

Você pode ver como o uso do Storybook pode melhorar nossos componentes sem precisar executar nosso aplicativo React principal. Este é o verdadeiro poder de trabalhar com componentes.

Aumentando a velocidade com o livro de histórias

Ao iterar por meio de componentes, muitas mudanças visuais estão prestes a acontecer. Ter um colega de trabalho puxando suas alterações de código e executando o Storybook localmente para ver as alterações funcionando é lento e certamente podemos trabalhar mais rápido.

Ferramentas de

Teste visual fornecem capturas de tela da comparação visual entre os componentes conforme você itera. Por exemplo, uma ferramenta pode gerar uma captura de tela de uma correção para nosso componente para renderizar entradas adequadamente no celular.

Isso funciona por meio de um serviço de integração contínua como CircleCI ou Ações do Github , você pode construir o Storybook e usar o Plugin Percy Storybook para capturar todas as suas histórias. Ele renderiza cada história em um ambiente de navegador consistente e envia o HTML para Percy para que seja renderizado. Em seguida, ele compara essas histórias renderizadas com versões anteriores para marcar as diferenças, como este:

Percy fornece um ótimo Github Action, que faz tudo isso automaticamente . Aqui está um exemplo de solicitação pull que implementa isso.

Na minha experiência, usar o teste visual com o Storybook detectou muitas regressões ao detectar mudanças que não detectamos na revisão do código.

Zombando de consultas de API com o Storybook

O Storybook pode não apenas nos fornecer uma maneira de testar a aparência e o comportamento dos componentes, mas também nos ajudar a testar o comportamento. Alguns componentes em seu aplicativo provavelmente consultam dados de uma API remota. Eles são geralmente chamados de “componentes de contêiner” ou “componentes de página”.

Fornecer dados falsos para seus componentes é ótimo, mas podemos nos aproximar da realidade simulando as solicitações de API que os componentes executam.

Este exemplo usa uma API REST, mas as bibliotecas usadas são compatíveis com GraphQL.

Pensando em nossas entradas de blog, normalmente um componente pai consultaria várias entradas:

 import React from"react";
import {useQuery} de"react-query"; importar {BlogEntryListItem} de"./BlogEntryListItem"; função assíncrona fetchBlogEntries () { const res=await fetch (""); if (! res.ok) { lançar novo erro (res.statusText); } dados const=aguarda res.json (); return data.results;
} export const BlogEntries=(props)=> { const {status, data, error}=useQuery ("entradas de blog", fetchBlogEntries); return data.map ((datum, index)=> { return ; });
};

Seria bom se pudéssemos simular uma resposta do servidor no Storybook para ver como o componente se comporta em diferentes cenários. Há uma ótima biblioteca chamada Mock Service Worker que interceptará consultas de rede do navegador e fornecerá respostas simuladas. Juntamente com o complemento Storybook para este módulo , podemos fornecer dados fictícios:

 import React from"react";
import {QueryClient, QueryClientProvider} de"react-query";
import {rest} de"msw"; importar {BlogEntries} de"./BlogEntries"; const mockedQueryClient=new QueryClient ({ defaultOptions: { consultas: { repetir: falso, }, },
}); export default { título:"BlogEntries", componente: BlogEntries,
}; export const BlogEntriesStates=()=> (   
); BlogEntriesStates.story={ parâmetros: { msw: [ rest.get ("", (req, res, ctx)=> { return res ( ctx.json ({ resultados: [ ... ], }) ); }), ], },
};

Conclusão

Eu cobri muito aqui, então vou resumir meu fluxo de trabalho do Storybook:

1. Receba os requisitos do produto
2. Pense na minha hierarquia de componentes
3. Para cada componente, escreva uma história para cada estado significativo
4. Para cada “página” ou recurso, escreva uma história e adicione simulações de API
5. Escreva o código para cada componente que satisfaça cada estado
6. Use o teste visual em CI para testar minhas mudanças no branch principal

Observe que há muitas etapas e pode levar algum tempo para se adaptar a esse novo fluxo. Mas depois de praticar esse fluxo de trabalho, parece natural para mim agora e eu nunca voltaria a escrever o código React sem usar o Storybook ao meu lado.

O livro de histórias é uma maneira perfeita de prototipar componentes e garantir que os componentes visuais recebam o amor que merecem.

A postagem Usando o Storybook para desenvolver componentes React mais rapidamente apareceu primeiro no LogRocket Blog .

Source link