Eu escrevi um botão personalizado ( MyStyledButton
) baseado em material-ui Button
.
import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
root: {
minWidth: 100
}
});
function MyStyledButton(props) {
const buttonStyle = useStyles(props);
const { children, width, ...others } = props;
return (
<Button classes={{ root: buttonStyle.root }} {...others}>
{children}
</Button>
);
}
export default MyStyledButton;
É estilizado usando um tema e isso especifica backgroundColor
que seja um tom de amarelo (Especificamente #fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
O componente é instanciado no meu principal index.js
e envolvido no theme
.
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
Se eu examinar o botão no Chrome DevTools, ele background-color
será "calculado" conforme o esperado. Este também é o caso do Firefox DevTools.
No entanto, quando escrevo um teste JEST para verificar background-color
e consulta o estilo do nó DOM - no botão usando getComputedStyles()
, transparent
volto e o teste falha.
const wrapper = mount(
<MyStyledButton variant="contained" color="primary">
Primary
</MyStyledButton>
);
const foundButton = wrapper.find("button");
expect(foundButton).toHaveLength(1);
//I want to check the background colour of the button here
//I've tried getComputedStyle() but it returns 'transparent' instead of #FBB900
expect(
window
.getComputedStyle(foundButton.getDOMNode())
.getPropertyValue("background-color")
).toEqual(myYellow);
Incluí um CodeSandbox com o problema exato, o código mínimo a ser reproduzido e o teste JEST com falha.
theme
necessidade não seria usada no teste? Como, envolva o <MyStyledButton>
no <MuiThemeProvider theme={theme}>
? Ou use alguma função de wrapper para adicionar o tema a todos os componentes?