Question

我试图用Jest和Enzyme测试组件样式。我使用TailwindCSS作为我的CSS框架，但未弹出create-react-app。所以这是我的组件：

import React from 'react'
import './tailwind.css' // the tailwind css

export function Alert({ children, className, icon, ...resProps }) {
  return (
    <div data-testid="qa-alert" className="my-2 p-3 text-lg bg-red-200 rounded-md flex items-center justify-center} {...resProps}>
      {icon && React.createElement(icon, { className: 'mr-2 text-xl' })}
      {children}
    </div>
  );
}

我想使用getComputedStyle方法测试背景色是红色（bg-red-200还是#fed7d7），这是我的测试：

it('Should have red background color', () => {
      const wrapper = mount(<Alert />);
      const alert = wrapper.find('div');
      const style = getComputedStyle(alert.getDOMNode());
      console.log(style);

      expect(style.backgroundColor).toBe('#fed7d7');
    });

但是测试失败，因为我没有背景样式。收到的值为空字符串。而style的日志是

CSSStyleDeclaration {
      '0': 'display',
      _values: { display: 'block' },
      _importants: { display: '' },
      _length: 1,
      _onChange: [Function]
    }

我如何获得样式？

Answer 1

您可以尝试使用jest-dom方法toHaveStyle()：

expect(alert).toHaveStyle({backgroundColor: '#fed7d7'});

Answer 2

您可以通过更新对其进行存档：

选择器wrapper.find('div')太通用了。使用wrapper.find('div[data-testid="qa-alert"]')或wrapper.find({'data-testid': "qa-alert"]})
使用酶hasClass进行测试

示例：

       it('Should have red background color', () => {
        const wrapper = mount(<Alert />);
        const alert = wrapper.find({'data-testid': "qa-alert"]});
        expect(alert.hasClass('bg-red-200')).toEqual(true);
       });

为什么酶不能从React组件加载样式？

2 个答案: