Question

我有一个文件style.scss，其中包含下面我的TimeBlock组件的样式。我编写了一个单元测试（使用Jest）来检查组件的样式，但是失败了。但是，如果我对TimeBlock组件使用内联样式而不是导入style.scss，则测试会通过。当从单独的文件导入样式时，为什么在我的测试中不应用样式？

TimeBlock.jsx ...

import React from 'react';
import './style.scss';

const TimeBlock = ({id, activeState, onClick}) => {
    return (
        <div data-testid={id} onClick={onClick} className={`time-block ${activeState}`}/>
    )

}

export default TimeBlock;

style.scss ...

.time-block {
    background: #FFFFFF;
    border: 1px solid #258381;
    box-sizing: border-box;
    border-radius: 4px;
    width: 64px;
    height: 24px;
}

在TimeBlock.test.js中...

import React from 'react';
import TimeBlock from './TimeBlock';
import { render } from '@testing-library/react';
import { screen } from '@testing-library/dom'

test('block is white', () => {
    const handleClick = jest.fn();

    render(<TimeBlock id={1} activeState={''} onClick={handleClick}/>);

    expect(screen.getByTestId('1')).toHaveStyle('background: #FFFFFF')
});

Answer 1

关于rtl，我遇到了关于jsdom和.toHaveStyle()的github问题和限制。

看来，唯一的方法是将其作为内联样式传递，因为问题是识别外部样式表：

<div 
  style={{background: '#FFFFFF'}} 
  data-testid={id} onClick={onClick} 
  className={`time-block ${activeState}`}
/>

如上所述，实际上不建议为了通过测试而弯曲代码，但是我确信您对此表示赞同，也许您需要另一个工具，{{ 3}}，但要小心，因为它很容易变得笨拙，否则仅适用于一些要素。

用Jest测试React组件的错误样式

1 个答案: