如何在jest中测试非内联CSS设置的元素文本颜色

首先你需要保证Jest运行环境支持DOM样式解析，Jest 28及以上版本需要单独安装jest-environment-jsdom，同时安装CSS转换依赖（比如jest-transform-css）保证样式文件能被注入到测试环境的DOM中。

修改后的测试代码 #

test('test text color', () => {
    const wrapper = mount(<你的实际组件名 />); // 此处替换为你要渲染的实际组件，而非React
    // 拿到p标签对应的真实DOM节点，原代码调用text()仅能拿到文本内容，无法操作元素本身
    const pDOMNode = wrapper.find('p').getDOMNode();
    // 获取元素的计算样式，包含非内联绑定的类样式
    const computedStyle = window.getComputedStyle(pDOMNode);
    // 断言颜色，部分环境会自动将颜色转为rgb格式，可根据实际返回值调整断言
    expect(computedStyle.color).toBe('red');
    // 可选兼容写法：expect(computedStyle.color).toBe('rgb(255, 0, 0)')
});

必要的Jest配置参考（jest.config.js） #

module.exports = {
  // 指定运行环境为jsdom，支持DOM相关API调用
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest',
    // 处理CSS文件，将样式规则注入到jsdom环境中
    '^.+\\.css$': 'jest-transform-css'
  }
}

注意：如果你使用React Testing Library而非Enzyme，只需将获取元素的逻辑替换为screen.getByText('Hello')即可，后续获取计算样式的逻辑完全一致。

内容的提问来源于stack exchange，提问作者George Macarubbo III