如何在 Jest 中模拟 Styled JSX 'global' 属性

Question

When trying to run tests on a NextJS project i'm coming up against the following error:

TypeError: _css.default.global is not a function

I've added a __mocks__/styled-jsx/css.js file that contains the following code in order to mock StyledJSX:

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

export default css;

This takes care of the files that contain normal css decalrations from styled-jsx, but not for my App.js file which contains

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

and

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

          body {
          ...

Any pointers would be appreciated!

Answer 1

SOLUTION

I've changed my import inside App.tsx from import css from "styled-jsx/css"; to import { global } from "styled-jsx/css"; , and my css declaration from css.global to global , and modifed my mock css.js file to:

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

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

export { css as default, global };