es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Interpolación de clase anidada de emoción/estilo no funciona con el linter o jest.

26 Jul, 2023 Programación

Dirigiéndote a un componente secundario StyledHighlight.

<styledbutton>
  <styledhighlight></styledhighlight>
</styledbutton>

const StyledHighlight = styled.span`
    display: block;
`;

const StyledButton = styled.button`
    & > ${StyledHighlight} {
        display: none;
    }
`;

Error de lint similar a este:

Invalid type "StyledComponent<><><htmlspanelement>, HTMLSpanElement>, Pick<><><htmlspanelement>, HTMLSpanElement>, "contextMenu" | ... 253 more ... | "css">, object>" of template literal expression  @typescript-eslint/restrict-template-expressions

Además, nuestra prueba en jest ya no pasa, no ve la herencia de display: none y asume que el display es siempre ‘block’, aunque nuestro storybook muestra que se está representando correctamente.

Curiosamente, background-color parece propagarse (cuando se utiliza otro método como span[data-testid="styled-highlight"], no estoy seguro de la interpolación de clases), pero aún no display.

¿Alguien sabe qué podría estar faltando con emotion/styled, typescript y jest?

No he encontrado mucha información al respecto en línea, pero esta respuesta parece validar que esta es una forma legítima de apuntar a un hijo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Componente Markdown en styled-components. Sin embargo, es posible que el problema esté relacionado con la forma en que se está utilizando la interpolación en el componente estilizado. Una cosa que puedes intentar es usar una cadena de plantilla en lugar de la interpolación de objetos, de la siguiente manera:

    const StyledButton = styled.button`
    & > ${StyledHighlight} {
        display: none;
    }
`;

    Esta sintaxis debería ser más compatible con TypeScript y puede resolver el problema de linting. En cuanto a la prueba de jest, es posible que el componente no se esté montando completamente en el entorno de prueba, lo que hace que los estilos heredados no se apliquen correctamente. Intenta verificar la configuración de la prueba y asegúrate de que styled-components esté configurado correctamente en el entorno. Además, intenta usar el método toJSON() en la instancia del componente para inspeccionar la salida renderizada en el entorno de prueba y ver si los estilos se aplican correctamente.

Comments are closed.