CODEWITHSUNDEEP
reactjstypescriptjestjsnext.jsstyled-jsx
RainbowShout
RainbowShout

Reputation: 31

How to mock Styled JSX 'global' property in Jest

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!

Upvotes: 1

Views: 292

Answers (1)

RainbowShout
RainbowShout

Reputation: 31

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 };

Upvotes: 0

Related Questions