Next.js中使用Testing Library测试Emotion css属性的警告与测试失败问题求助

嘿，我来帮你搞定这两个问题！先看你的代码和配置，问题主要出在测试环境对Emotion的css prop处理以及样式注入上，一步步来解决：

第一个问题：Jest抛出「Invalid value for prop 'css' on tag...」警告 #

原因 #

你在测试中使用了esbuild-jest作为转换器，但esbuild默认不会处理Emotion的css prop——这个prop本来是由@emotion/babel-plugin转成普通className的，测试环境没做这个转换，React就把它当成了无效的HTML属性，所以抛出警告。

解决方案 #

有两种方式可选：

方案1：改用babel-jest（更省心，因为你已经配置好Babel了）

修改jest.config.js里的transform配置，把esbuild-jest换成babel-jest：

transform: {
  '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
},

这样Babel会自动用你配置好的@emotion/babel-plugin处理css prop，转换成合法的className，警告就消失了。

方案2：给esbuild-jest添加Emotion插件

如果你坚持用esbuild，需要安装Emotion的esbuild插件并配置：

1. 先安装依赖：

npm install @emotion/esbuild-plugin --save-dev

2. 修改jest.config.js的transform部分：

transform: {
  '^.+\\.tsx?$': [
    'esbuild-jest',
    {
      plugins: [require('@emotion/esbuild-plugin')()],
    },
  ],
},

第二个问题：测试失败，元素不具备css prop对应的样式 #

原因 #

Emotion的样式是动态注入到DOM中的，Testing Library默认的toHaveStyle匹配器有时候无法正确识别Emotion生成的样式；另外，你代码里的absoulte是拼写错误（正确是absolute），不过测试里也同步写错了，暂时不影响当前测试，但建议修正。

解决方案 #

使用@emotion/jest提供的专用匹配器，它能准确检查Emotion应用的样式：

1. 安装依赖：

npm install @emotion/jest --save-dev

2. 在jest.setup.js中引入：

import '@emotion/jest';

3. 修改测试代码，用toHaveStyleRule替代原生的toHaveStyle（更可靠）：

it('position absolute', () => {
  render(<Foo />);
  // 注意：这里把拼写错误的absoulte改成absolute，同时修正组件里的css
  expect(screen.getByRole('heading')).toHaveStyleRule('position', 'absolute');
});

另外记得把组件里的fooCss中的absoulte改成absolute，避免后续样式不生效的问题：

const fooCss = (theme: Theme) => css`position: absolute;`;

最后再检查一下你的babelrc.js配置，已经正确设置了preset-react的importSource为@emotion/react，这部分没问题，不用改。

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