@fluent-windows/core/es/test-utils/getStyle.js

React components that inspired by Microsoft's Fluent Design System.

import * as React from 'react';
import { render, getClasses } from './index';
import '@testing-library/jest-dom/extend-expect';
import Box, { name } from '../Box/Box';
import { styles } from '../Box/Box.styled';
const testText = 'Hello World';
const classes = getClasses(styles, name);
export function getStyle(props) {
  const {
    sheets
  } = render(React.createElement(Box, props, testText));
  const result = sheets.registry[0].rules.index.reduce((acc, cur) => {
    const rule = cur;

    if (rule.at === 'media') {
      if (Object.keys(rule.rules.index[0].style).length) {
        return { ...acc,
          [rule.key]: rule.rules.index[0].style
        };
      }
    } else if (classes.system.includes(rule.id) && !!Object.keys(rule.style).length) {
      return { ...acc,
        ...rule.style
      };
    }

    return acc;
  }, {});
  return result;
}