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

Question

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

TypeError: _css.default.global is not a function

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

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 {
          ...

任何指针将不胜感激！

Answer 1

解决方案

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

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

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

export { css as default, global };