Ant Design ConfigProvider ColorBorder测试失效，如何修复？

我正在使用Ant Design的ConfigProvider自定义主题，将设计令牌colorBorder设置为#ff0dff，代码如下：

import { ConfigProvider, Button } from "antd";
import TestTheme from "./token.json";

export function ThemeProvider({ children }) {
  return <ConfigProvider theme={TestTheme}>{children}</ConfigProvider>;
}

但用Jest和React Testing Library测试组件时，获取到的按钮边框色是PrimaryColor而非设置的colorBorder，测试代码如下：

it('button border should have correct value from token.json "colorBorder" ', () => {
    const { container } = render(
      <ThemeProvider>
        <Button>Test</Button>
      </ThemeProvider>
    );

    expect(container.querySelector("button")).toHaveStyle({
      "border-color": "#ff0dff"
    });
  });

在Chrome中渲染时，边框颜色显示正常，但测试始终不通过。

编辑补充：
附上Ant Design主题编辑器截图，其中defaultBorderColor为#d9d9d9，colorBorder设为#ff0dff，按钮预览的粉色边框已正确应用。

问题核心是Jest环境下，Ant Design的CSS-in-JS样式不会像浏览器环境那样自动完成令牌替换与注入，需额外配置让测试环境正确解析主题令牌，可按以下步骤修复：

1. 安装样式断言依赖
   安装@emotion/jest增强样式断言能力，它能更准确解析CSS-in-JS生成的样式：

npm install --save-dev @emotion/jest

2. 修改测试代码使用新断言
   替换原有的toHaveStyle为@emotion/jest提供的toHaveStyleRule：

import { render, screen } from '@testing-library/react';
import { ThemeProvider } from './ThemeProvider';
import { Button } from 'antd';
import '@testing-library/jest-dom';
import { toHaveStyleRule } from '@emotion/jest';

expect.extend({ toHaveStyleRule });

it('button border should have correct value from token.json "colorBorder" ', () => {
  render(
    <ThemeProvider>
      <Button>Test</Button>
    </ThemeProvider>
  );

  const button = screen.getByText('Test');
  expect(button).toHaveStyleRule('border-color', '#ff0dff');
});

3. 校验主题令牌结构
   确保token.json结构符合Ant Design要求，正确格式需将令牌包裹在token字段下：

{
  "token": {
    "colorBorder": "#ff0dff"
  }
}

4. 配置Jest环境
   在jest.config.js中添加以下配置，确保样式能被正确处理：

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

同时在src/setupTests.js中引入测试扩展，避免每个测试文件重复配置：

import '@testing-library/jest-dom';
import { toHaveStyleRule } from '@emotion/jest';

expect.extend({ toHaveStyleRule });

完成以上配置后，测试环境即可正确解析Ant Design主题令牌，断言结果会与浏览器环境一致。

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