TypeError: global.beforeEach is not a function

[supminn]

I am new to jest-styled-components. I have created a react component and added styles using styled-components However, while adding the following test, I am getting these errors:

Component

const StyledImage = styled.img`
  height: auto;
  margin: 0.5rem;
  border-radius: 0.5rem;
  width: ${(props) => {
    switch (props.size) {
      case "small":
        return "6rem";
      case "medium":
        return "12rem";
      case "large":
        return "14rem";
      default:
        return "12rem";
    }
  }};
`;
function Image({ src, title, size }) {
  return <StyledImage src={src} alt={title} size={size} />;
}

Test file

import { render, screen } from "@testing-library/react";
import { Image } from "./Image";
import { describe, expect, test } from "vitest";
import matchers from "@testing-library/jest-dom/matchers";
expect.extend(matchers);
import "jest-styled-components";

describe("Image", () => {
  test("renders an image with the correct size", () => {
    render(<Image src="test.jpg" title="Test image" size="small" />);
    const imageElement = screen.getByAltText(/test image/i);
    expect(imageElement).toBeInTheDocument();
    expect(imageElement).toHaveStyleRule("width: 6rem");
  });
});

Package version

"styled-components": "^6.0.6"
"jest-styled-components": "^7.1.1",

Error Message screenshot

Note: I tried to downgrade a few versions of jest-styled-components and styled-components but could not surpass this issue. Could you please share the possible fixes.

[khusharth]

@supminn Can you please share your jest configuration file / or a project link where this is reproducible?

[supminn]

Hi @khusharth Thanks for reaching out. Here's my package https://github.com/supminn/monorepo-lerna-demo/tree/master/packages/app-atoms (app-atoms).

I have created a react app using Vite. I tried to create unit tests using vitest. Since I have used styled-components, I was trying to test the styles using jest-styled-components.

Do let me know how I can fix this issue. Thanks.

[jalooc]

That's because Vitest by default does not expose test, expect, beforeEach etc. as globals, like jest does. You can make it easily work by changing that with a configuration: https://vitest.dev/config/#globals

However I'd love to see jest-styled-components enable an option to set up the before hooks without needing to expose globals, because not having globals is preferable in general.

[me4502]

These expect calls would also hit issues without globals, https://github.com/styled-components/jest-styled-components/blob/main/src/utils.js#L72-L74

So it's more than just the hooks sadly

[guidsdo]

I found the solution in @ggdaltoso's

{
  "test": {
    "globals": true,
    "setupFiles": ["jest-styled-components"]
  }
}

[supminn]

I found the solution in @ggdaltoso's

{
  "test": {
    "globals": true,
    "setupFiles": ["jest-styled-components"]
  }
}

This worked! Thank you soo much. Closing this issue.