material-uiMyStyledButton
기반 사용자 정의 버튼 ( )을 작성했습니다 . 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;
테마를 사용하여 스타일이 지정 backgroundColor
되며을 노란색 음영으로 지정합니다 (특히 #fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
구성 요소가 내 메인에서 인스턴스화 index.js
되고에 래핑됩니다 theme
.
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
Chrome DevTools에서 버튼을 검사하면 background-color
예상대로 "계산됩니다". Firefox DevTools에서도 마찬가지입니다.
나는 농담 테스트를 작성할 때 그러나를 확인 background-color
하고 내가 사용하는 버튼의 DOM 노드 스타일을 쿼리 getComputedStyles()
내가 가져 transparent
왔다 테스트가 실패합니다.
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);
정확한 문제, 재현 할 수있는 최소 코드 및 실패한 JEST 테스트가있는 CodeSandbox를 포함 시켰습니다.
theme
필요가 시험에 사용되는? 마찬가지로, 포장 <MyStyledButton>
의를 <MuiThemeProvider theme={theme}>
? 또는 일부 래퍼 기능을 사용하여 테마를 모든 구성 요소에 추가합니까?