如何使用 jest 和 react-testing-library 测试来自 sass 的样式？

Question

我需要从 sass 中测试一个组件的样式，但是在 dom 中只加载了内联样式

我的测试用例：

   describe('Danger', () => {
      const dangerLabel = <DangerLabel>TESTE</DangerLabel>;
      it('deve ter class -danger', () => {
        const { container } = render(dangerLabel);
        expect(container.firstChild).toHaveClass('-danger');
      });
      it('deve ter a cor vermelho', () => {
        const { container } = render(dangerLabel);
        const style = window.getComputedStyle(container.firstElementChild);
        expect(style.backgroundColor).toBe('#e74c3c');
      });
    });

笑话配置

module.exports = {
  roots: ['<rootDir>'],
  transform: {
    '\\.(js|jsx)?$': 'babel-jest',
  },
  testMatch: [
    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}',
  ],
  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
  testPathIgnorePatterns: ['/node_modules/', '/public/'],
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
  ],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/jest/__mocks__/fileMock.js',
    '.+\\.(css|scss)$': 'identity-obj-proxy',
  },
};

组件导出：

 import LabelContainer from './label_container';
    import Label from './DefaultLabel';
    import DangerLabel from './DangerLabel';
    import PrimaryLabel from './PrimaryLabel';
    import WarningLabel from './WarningLabel';
    import SuccessLabel from './SuccessLabel';
    import InfoLabel from './InfoLabel';
    import '../assets/styles/label.scss';
    
    export default Label;
    export {
      LabelContainer,
      PrimaryLabel,
      DangerLabel,
      WarningLabel,
      SuccessLabel,
      InfoLabel,
    };

执行：

expect(received).toBe(expected) // Object.is equality

    Expected: "#e74c3c"
    Received: ""

      30 |       const { container } = render(dangerLabel);
      31 |       const style = window.getComputedStyle(container.firstElementChild);
    > 32 |       expect(style.backgroundColor).toBe('#e74c3c');
         |                                     ^
      33 |     });
      34 |   });
      35 |

我已经尝试了一些类似 jest-transform-css 和 jest-transform-scss 的包，但是没有成功，可以做那个测试吗？

根据要求 危险标签代码：

import React from 'react';
import DefaultLabel from './DefaultLabel';

const DangerLabel = props => (
  <DefaultLabel {...props} className="-danger" />
);

export default DangerLabel;

默认标签

使用 toHaveStyle：

 it('deve ter a cor vermelho', () => {
      const { container } = render(dangerLabel);
      expect(container.firstElementChild).toHaveStyle(`
        background-color: rgb(231, 76, 60)};
      `);
    });

结果：

Answer 1

在测试文件中渲染 DangerLabel 时，您丢失了 visible 属性，这就是它没有渲染并且测试 #1 失败的原因。

const dangerLabel = <DangerLabel visible>TESTE</DangerLabel>;

您将面临的下一个错误是您从window.getComputedStyle 获得的style 对象中所有CSS 属性的空字符串（在测试#2 中）。它有一个reason。

所以，我继续使用 jest-dom 库中的 toHaveStyle 断言背景颜色 CSS 属性的替代实现。自己。

我必须使用 npm 模块 hex-rgb 将十六进制颜色转换为 rgba 值。

查看解决方案here。要查看codesandbox中的测试结果，请阅读this

奖励：使用 style 对象不起作用，但有一种从 getComputedStyle - const backgroundColor = style. getPropertyValue ('background-color) 的返回值访问 CSS 属性的声明方式。