Come testare lo stile condizionale creato con Material UI makeStyles ()?

Question

Lavoro su un'app React da alcune settimane e utilizzo i componenti dell'interfaccia utente materiale per la maggior parte di base.

Ho questo componente che ha il suo cambio di stile a seconda dei valori dei suoi oggetti di scena. Per fare questo, ho fatto qualcosa del tipo:

  const useStyles = makeStyles({
    component: {
      ...
      backgroundColor: getComponentBackgroundColor(),
      ...
    }
  });

con getComponentBackgroundColor()l'essere definito come

  const getComponentBackgroundColor = () => {
    if (props.someProp) {
      return "green";
    }
    return "red";
  };

e quindi impostando il componente className.

Il mio problema è che voglio testare questo componente per assicurarmi che lo stile sia applicato correttamente (alcuni getStyle()metodi sono più complessi del solo cercare se esiste o meno un oggetto di scena).

Sto usando react-testing-librarye il mio primo istinto è stato quello di verificare se il componente renderizzato avesse il diritto className, ma dopo un'ulteriore ispezione, mi sono reso conto che makeStyle()assegna un nome di classe casuale makeStyles-component-12a ciascun componente. Ho anche notato che i componenti con lo stesso stile avevano nomi di classi diversi. Quindi è stato un no-go.

Esiste un modo semplice per testare lo stile condizionale quando si utilizzano le interfacce utente dei materiali makeStyles()?

Grazie mille.

Answer 1

Sebbene non sia consigliabile accoppiare i test con una classe specifica o uno stile css, è possibile utilizzare il matcher di jest-dom.toHaveStyle per verificare se viene applicato lo stile giusto quando si passano gli oggetti di scena corrispondenti.