我已经基于material-ui MyStyledButton
编写了一个自定义按钮(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中也是如此。
但是,当我编写一个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测试失败。
我已经接近了,但还没有一个解决方案。
主要问题是MUIButton向元素注入标签以增强样式。这在您的单元测试中没有发生。通过使用材料测试使用的createMount,我能够使它正常工作。
此修复程序后,样式正确显示。但是,计算出的样式仍然不起作用。看来其他人在正确处理此酶方面遇到了问题-因此,我不确定是否可能。
要到达我所在的位置,请使用您的测试代码段,将其复制到顶部,然后将测试代码更改为:
const myMount = createMount({ strict: true });
const wrapper = myMount(
<MuiThemeProvider theme={theme}>
<MyStyledButton variant="contained" color="primary">
Primary
</MyStyledButton>
</MuiThemeProvider>
);
class Mode extends React.Component {
static propTypes = {
/**
* this is essentially children. However we can't use children because then
* using `wrapper.setProps({ children })` would work differently if this component
* would be the root.
*/
__element: PropTypes.element.isRequired,
__strict: PropTypes.bool.isRequired,
};
render() {
// Excess props will come from e.g. enzyme setProps
const { __element, __strict, ...other } = this.props;
const Component = __strict ? React.StrictMode : React.Fragment;
return <Component>{React.cloneElement(__element, other)}</Component>;
}
}
// Generate an enhanced mount function.
function createMount(options = {}) {
const attachTo = document.createElement('div');
attachTo.className = 'app';
attachTo.setAttribute('id', 'app');
document.body.insertBefore(attachTo, document.body.firstChild);
const mountWithContext = function mountWithContext(node, localOptions = {}) {
const strict = true;
const disableUnnmount = false;
const localEnzymeOptions = {};
const globalEnzymeOptions = {};
if (!disableUnnmount) {
ReactDOM.unmountComponentAtNode(attachTo);
}
// some tests require that no other components are in the tree
// e.g. when doing .instance(), .state() etc.
return mount(strict == null ? node : <Mode __element={node} __strict={Boolean(strict)} />, {
attachTo,
...globalEnzymeOptions,
...localEnzymeOptions,
});
};
mountWithContext.attachTo = attachTo;
mountWithContext.cleanUp = () => {
ReactDOM.unmountComponentAtNode(attachTo);
attachTo.parentElement.removeChild(attachTo);
};
return mountWithContext;
}