Napisałem niestandardowy przycisk ( MyStyledButton
) oparty na interfejsie materiałowym 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;
Jest stylizowany za pomocą motywu, który określa backgroundColor
odcień żółtego (Specjalnie #fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
Składnik jest tworzony w mojej głównej index.js
i pakowany w theme
.
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
Jeśli zbadam przycisk w Chrome DevTools, background-color
jest on „obliczany” zgodnie z oczekiwaniami. Dotyczy to również DevTools Firefox.
Jednak kiedy piszę test żartem aby sprawdzić background-color
i kwerendy DOM styl węzeł używając przycisku getComputedStyles()
dostaję transparent
z powrotem, a test nie powiedzie się.
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);
Dołączyłem CodeSandbox z dokładnym problemem, minimalnym kodem do odtworzenia i nieudanym testem JEST.
theme
potrzeby użycia w teście? Jak w, zawiń<MyStyledButton>
w<MuiThemeProvider theme={theme}>
? Lub użyj funkcji otoki, aby dodać motyw do wszystkich składników?Odpowiedzi:
Podszedłem bliżej, ale jeszcze nie do końca rozwiązanie.
Głównym problemem jest to, że MUIButton wstrzykuje znacznik do elementu, aby zasilić style. Nie dzieje się tak w teście jednostkowym. Udało mi się to uruchomić za pomocą createMount , którego używają testy materiałowe.
Po tej poprawce styl jest poprawnie wyświetlany. Jednak styl obliczeniowy nadal nie działa. Wygląda na to, że inni mieli problemy z prawidłową obsługą enzymów - więc nie jestem pewien, czy to możliwe.
Aby dostać się do miejsca, w którym byłem, weź swój testowy fragment, skopiuj go na górę, a następnie zmień kod testowy na:
źródło