Not working correctly with @testing-library/react about jest-styled-components

[MarcosSarges]

Who error?

[s10mcow]

I also cannot get this working...

consistently get a variation of this error:

  ● Test suite failed to run

    Cannot create styled-component for component: undefined.

      4 | import "jest-styled-components";
      5 |
    > 6 | const Card = styled.View`
        |                     ^
      7 |   display: flex;
      8 | `;
      9 |                         

Super basic setup:

import { render, screen } from "@src/test-utils/test-utils";
import styled from "styled-components/native";
import "jest-styled-components";

const Card = styled.View`
  display: flex;
`;

describe("Card", () => {
  it("should render", () => {
    const tree = render(<Card />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

[MarcosSarges]

I also cannot get this working...

consistently get a variation of this error:

  ● Test suite failed to run

    Cannot create styled-component for component: undefined.

      4 | import "jest-styled-components";
      5 |
    > 6 | const Card = styled.View`
        |                     ^
      7 |   display: flex;
      8 | `;
      9 |                         

Super basic setup:

import { render, screen } from "@src/test-utils/test-utils";
import styled from "styled-components/native";
import "jest-styled-components";

const Card = styled.View`
  display: flex;
`;

describe("Card", () => {
  it("should render", () => {
    const tree = render(<Card />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Try to use this structure with the styled component exported from a variable

import * as styledComponents from "styled-components/native";
import * as theme from "./theme";
import * as themeConstants from "./themeConstants";
import * as darkTheme from "./darkTheme";
export { theme };
export { darkTheme };
export { theme as standard };
export { themeConstants };

const { default: styled, css, ThemeProvider } = styledComponents;

export { css, ThemeProvider };

export default styled;