如何在Jest中Mock Styled JSX的global属性解决测试报错

步骤1：完善styled-jsx的mock文件 #

你当前的mock只实现了基础的css调用逻辑，未覆盖css.global静态方法，修改__mocks__/styled-jsx/css.js内容如下：

const css = (styles, ...interpolations) => {
  // 处理普通css`...`语法
  return styles.reduce((res, str, idx) => res + str + (interpolations[idx] || ''), '')
}

// 适配css.global`...`全局样式调用语法
css.global = (styles, ...interpolations) => {
  return styles.reduce((res, str, idx) => res + str + (interpolations[idx] || ''), '')
}

// 可选补充：如果项目用到了styled-jsx的其他扩展API也可对应添加mock
css.resolve = () => ({ className: '', styles: '' })
css.media = css

export default css

步骤2：适配<style jsx global>标签场景 #

如果项目中使用了jsx写法的全局样式，需要在测试环境的Babel配置中添加styled-jsx的测试转译插件，在babel.config.json或.babelrc中补充如下配置：

{
  "env": {
    "test": {
      "presets": ["next/babel"],
      "plugins": ["styled-jsx/babel-test"]
    }
  }
}

修改完成后重新运行Jest测试即可解决报错，普通css声明、css.global调用、<style jsx global>标签三类场景都能被正常mock处理。

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