如何在 Jest 中模拟 Styled JSX 的“全局”属性答案

【问题标题】：How to mock Styled JSX 'global' property in Jest如何在 Jest 中模拟 Styled JSX 的“全局”属性
【发布时间】：2021-11-30 21:55:25
【问题描述】：

当尝试在 NextJS 项目上运行测试时，我遇到了以下错误：

TypeError: _css.default.global is not a function

为了模拟 StyledJSX，我添加了一个包含以下代码的 __mocks__/styled-jsx/css.js 文件：

const css = () => {
  return "";
};

export default css;

这会处理包含来自 styled-jsx 的普通 css 声明的文件，但不适用于我的 App.js 文件，其中包含

// CSS reset
const styles = css.global`
  html,
  body,
  div,
  span,
  object,
  iframe,
  ...

和

<style jsx global>{`
          @import "${mockHeadImport}";
          ${mockBodyImport === mockHeadImport
            ? ""
            : `@import "${mockBodyImport}";`}

          body {
          ...

任何指针将不胜感激！

【问题讨论】：

这能回答你的问题吗？ How can I use jest coverage in Next.js styled-jsx?
@juliomalves - 不幸的是没有。这负责模拟 css 的实例，但不是 css.global

标签： reactjs typescript jestjs next.js styled-jsx

【解决方案1】：

解决方案

我已将App.tsx 中的导入从import css from "styled-jsx/css"; 更改为import { global } from "styled-jsx/css";，并将我的css 声明从css.global 更改为global，并将我的模拟css.js 文件修改为：

const css = () => {
  return "";
};

const global = () => {
  return "";
};

export { css as default, global };

【讨论】：