ผมเคยเขียนปุ่มที่กำหนดเอง ( MyStyledButton
) ตามวัสดุ 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;
มันมีสไตล์โดยใช้ชุดรูปแบบและสิ่งนี้ระบุbackgroundColor
ว่าเป็นสีเหลือง (พิเศษ#fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
ส่วนประกอบถูกสร้างขึ้นใน main ของฉันindex.js
และถูกหุ้มtheme
ด้วย
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
หากฉันตรวจสอบปุ่มใน Chrome DevTools background-color
จะ "คำนวณ" ตามที่คาดไว้ นี่เป็นกรณีใน Firefox DevTools
อย่างไรก็ตามเมื่อฉันเขียนการทดสอบ JEST เพื่อตรวจสอบ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);
ฉันได้รวม CodeSandbox กับปัญหาที่แน่นอนรหัสขั้นต่ำในการทำซ้ำและการทดสอบ JEST ที่ล้มเหลว
theme
จำเป็นต้องใช้ในการทดสอบใช่ไหม ในขณะที่ห่อ<MyStyledButton>
ใน<MuiThemeProvider theme={theme}>
? หรือใช้ฟังก์ชั่น wrapper เพื่อเพิ่มธีมให้กับส่วนประกอบทั้งหมด?