为什么JEST测试中的getComputedStyle()在Chrome/Firefox DevTools中将不同的结果返回给计算样式 [英] Why does getComputedStyle() in a JEST test return different results to computed styles in Chrome / Firefox DevTools

问题描述

我已经基于 material-ui Button 编写了一个自定义按钮( MyStyledButton ).

I've written a custom button (MyStyledButton) based on 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;

使用主题设置样式，并将 backgroundColor 指定为黄色阴影(具体是#fbb900 )

It is styled using a theme and this specifies the backgroundColor to be a shade of yellow (Specficially #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 中.

The component is instantiated in my main index.js and wrapped in the theme.

  <MuiThemeProvider theme={theme}>
     <MyStyledButton variant="contained" color="primary">
       Primary Click Me
     </MyStyledButton>
  </MuiThemeProvider>

如果我检查Chrome DevTools中的按钮，则会按预期计算" background-color .Firefox DevTools中也是如此.

If I examine the button in Chrome DevTools the background-color is "computed" as expected. This is also the case in Firefox DevTools.

但是，当我编写一个JEST测试来检查 background-color 并查询DOM节点样式时，使用 getComputedStyles()按钮可以得到 transparent返回，测试失败.

However when I write a JEST test to check the background-color and I query the DOM node style òf the button using getComputedStyles() I get transparent back and the test fails.

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测试失败.

推荐答案

我已经接近了，但还没有一个解决方案.

I've gotten closer, but not quite at a solution yet.

主要问题是MUIButton向元素注入标签以增强样式.这在您的单元测试中没有发生.通过使用

The main issue is that MUIButton injects a tag to the element to power the styles. This isn't happening in your unit test. I was able to get this to work by using the createMount that the material tests use.

此修复程序之后，样式正确显示.但是，计算出的样式仍然不起作用.看来其他人在正确处理这种酶方面遇到了问题-因此我不确定是否可能.

After this fix, the style is correctly showing up. However, the computed style still doesn't work. It looks like others have run into issues with enzyme handling this correctly - so I'm not sure if it's possible.

要到达我的位置，请携带您的测试代码段，将其复制到顶部，然后将测试代码更改为:

To get to where I was, take your test snippet, copy this to the top, and then change your test code to:

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;
}

这篇关于为什么JEST测试中的getComputedStyle()在Chrome/Firefox DevTools中将不同的结果返回给计算样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！