使用enzyme+ava能否检测React组件的指定CSS样式属性？

不需要更换Ava，仅搭配Enzyme即可实现需求，是否需要引入第三方库取决于你的opacity属性实现方式：

场景1：opacity通过内联style绑定，无需额外依赖 #

如果组件的opacity是直接通过style props绑定的，直接用Enzyme自带的API即可获取样式属性，示例代码如下：

import test from 'ava';
import { mount } from 'enzyme';
import TargetComponent from './你的组件路径';

test('触发事件后组件opacity为0', t => {
  const wrapper = mount(<TargetComponent />);
  // 模拟触发目标事件，示例为点击事件，可替换为你实际的触发逻辑
  wrapper.find('.目标元素选择器').simulate('click');
  // 直接读取内联样式的opacity值
  const targetOpacity = wrapper.find('.目标元素选择器').props().style.opacity;
  // Ava断言
  t.is(targetOpacity, 0);
});

场景2：opacity通过CSS类控制，依赖jsdom即可 #

如果opacity是通过CSS类定义的样式，Enzyme默认无法直接读取类对应的样式值，你只要确保Enzyme的mount渲染已经配置好jsdom环境（Enzyme做DOM渲染的标配依赖，和测试框架无关），就可以用原生DOM API读取计算样式，示例代码如下：

import test from 'ava';
import { mount } from 'enzyme';
import TargetComponent from './你的组件路径';

test('触发事件后组件计算样式opacity为0', t => {
  const wrapper = mount(<TargetComponent />);
  const targetDom = wrapper.find('.目标元素选择器').getDOMNode();
  // 模拟触发目标事件
  wrapper.find('.触发事件的元素选择器').simulate('click');
  // 读取元素计算样式
  const computedStyle = window.getComputedStyle(targetDom);
  // 注意getComputedStyle返回的属性值为字符串类型
  t.is(computedStyle.opacity, '0');
});

可选：使用适配Ava的断言库简化代码 #

如果想要更简洁的样式断言写法，可以引入适配Ava的ava-enzyme工具库，无需切换到Jest，示例代码如下：

1. 安装依赖：

npm install ava-enzyme --save-dev

2. 测试代码：

import test from 'ava';
import { mount } from 'enzyme';
import avaEnzyme from 'ava-enzyme';
import TargetComponent from './你的组件路径';

// 注入enzyme断言方法
test.beforeEach(t => {
  avaEnzyme(t);
});

test('触发事件后组件opacity为0', t => {
  const wrapper = mount(<TargetComponent />);
  wrapper.find('.触发事件的元素选择器').simulate('click');
  // 直接调用样式断言方法
  t.expect(wrapper.find('.目标元素选择器')).toHaveStyle({ opacity: 0 });
});

内容的提问来源于stack exchange，提问作者sab