Ich habe eine benutzerdefinierte Schaltfläche ( MyStyledButton
) basierend auf Material-UI geschrieben 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;
Es ist mit einem Thema gestaltet und dies gibt backgroundColor
an, dass es sich um einen Gelbton handelt (speziell #fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
Die Komponente wird in meiner Hauptkomponente instanziiert index.js
und in die eingeschlossen theme
.
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
Wenn ich die Schaltfläche in Chrome DevTools untersuche, background-color
wird sie wie erwartet "berechnet". Dies ist auch in Firefox DevTools der Fall.
Wenn ich jedoch einen JEST-Test schreibe, um den background-color
DOM-Knotenstil zu überprüfen, frage getComputedStyles()
ich transparent
zurück und der Test schlägt fehl.
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);
Ich habe eine CodeSandbox mit dem genauen Problem, dem zu reproduzierenden Mindestcode und dem fehlgeschlagenen JEST-Test beigefügt.
theme
im Test verwendet werden? Wie in, wickeln Sie die<MyStyledButton>
in die<MuiThemeProvider theme={theme}>
? Oder verwenden Sie eine Wrapper-Funktion, um das Thema allen Komponenten hinzuzufügen?Antworten:
Ich bin näher gekommen, aber noch nicht ganz an einer Lösung.
Das Hauptproblem besteht darin, dass MUIButton dem Element ein Tag hinzufügt, um die Stile zu aktivieren. Dies geschieht in Ihrem Komponententest nicht. Ich konnte dies mithilfe des von den Materialtests verwendeten createMount zum Laufen bringen .
Nach diesem Fix wird der Stil korrekt angezeigt. Der berechnete Stil funktioniert jedoch immer noch nicht. Es sieht so aus, als ob andere auf Probleme mit der korrekten Handhabung von Enzymen gestoßen sind - daher bin ich mir nicht sicher, ob dies möglich ist.
Um dorthin zu gelangen, wo ich war, nehmen Sie Ihr Test-Snippet, kopieren Sie es nach oben und ändern Sie dann Ihren Testcode in:
quelle