Bir JEST testindeki getComputedStyle () neden Chrome / Firefox DevTools'ta hesaplanan stillere farklı sonuçlar döndürüyor?

Material-ui'yeMyStyledButton dayalı özel bir düğme ( ) yazdım . 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;

Bir tema kullanılarak stilize edilir ve bu backgroundColor, sarı bir gölge olacağını belirtir (Özellikle #fbb900)

import { createMuiTheme } from "@material-ui/core/styles";

export const myYellow = "#FBB900";

export const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      containedPrimary: {
        color: "black",
        backgroundColor: myYellow
      }
    }
  }
});

Bileşen ana bölümümde somutlaştırılır index.jsve içine sarılır theme.

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

Chrome DevTools'ta düğmeyi incelersem, background-colorbeklendiği gibi "hesaplanır". Bu aynı zamanda Firefox DevTools'ta da geçerlidir.

Ancak kontrol etmek için bir JEST sınaması yazdığımda background-colorve DOM düğümü stilini backf geri getComputedStyles()aldığım transparentve sınamayı kullanarak düğmeyi sorguladığımda .

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

Ben tam sorun, yeniden üretmek için minimum kod ve başarısız JEST testi ile bir CodeSandbox dahil ettik.

Yaklaştım ama henüz tam bir çözüm bulmadım.

Ana sorun, MUIButton'un stilleri güçlendirmek için öğeye bir etiket enjekte etmesidir. Bu birim testinizde gerçekleşmiyor. Bunu malzeme testlerinin kullandığı createMount kullanarak çalışabildim .

Bu düzeltmeden sonra stil doğru bir şekilde ortaya çıkıyor. Ancak, hesaplanan stil hala çalışmıyor. Diğerleri bunu doğru şekilde işleyen enzim ile ilgili sorunlarla karşılaşmış gibi görünüyor - bu yüzden mümkün olup olmadığından emin değilim.

Bulunduğum yere ulaşmak için test snippet'inizi alın, bunu en üste kopyalayın ve test kodunuzu şu şekilde değiştirin:

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