Saya telah menulis tombol khusus ( MyStyledButton
) berdasarkan 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;
Ini ditata menggunakan tema dan ini menentukan backgroundColor
untuk menjadi warna kuning (Khususnya #fbb900
)
import { createMuiTheme } from "@material-ui/core/styles";
export const myYellow = "#FBB900";
export const theme = createMuiTheme({
overrides: {
MuiButton: {
containedPrimary: {
color: "black",
backgroundColor: myYellow
}
}
}
});
Komponen ini dipakai di main saya index.js
dan dibungkus dalam theme
.
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary Click Me
</MyStyledButton>
</MuiThemeProvider>
Jika saya memeriksa tombol di Chrome DevTools background-color
"dikomputasi" seperti yang diharapkan. Ini juga terjadi di Firefox DevTools.
Namun ketika saya menulis tes JEST untuk memeriksa background-color
dan saya meminta gaya simpul DOM jika tombol menggunakan getComputedStyles()
saya transparent
kembali dan tes gagal.
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);
Saya telah memasukkan CodeSandbox dengan masalah yang tepat, kode minimum untuk mereproduksi dan tes JEST yang gagal.
theme
perlu digunakan dalam ujian? Seperti di, bungkus<MyStyledButton>
dalam<MuiThemeProvider theme={theme}>
? Atau gunakan beberapa fungsi pembungkus untuk menambahkan tema ke semua komponen?Jawaban:
Saya sudah semakin dekat, tetapi belum menemukan solusi.
Masalah utama adalah bahwa MUIButton menyuntikkan tag ke elemen untuk memberi gaya pada style. Ini tidak terjadi dalam pengujian unit Anda. Saya bisa menjalankan ini dengan menggunakan createMount yang menggunakan tes materi.
Setelah perbaikan ini, gaya ditampilkan dengan benar. Namun, gaya komputasi masih tidak berfungsi. Sepertinya orang lain mengalami masalah dengan penanganan enzim ini dengan benar - jadi saya tidak yakin apakah itu mungkin.
Untuk sampai ke tempat saya sebelumnya, ambil cuplikan pengujian Anda, salin ini ke atas, lalu ubah kode pengujian Anda ke:
sumber