Not working correctly with @testing-library/react

[balibou]

I'm trying to use this library with @testing-library/react and can't make it work properly. I changed package versions, looked on other github repositories and impossible to find a working example. (Does anyone has a working repo to show ?)

package.json

  "@swc/core": "^1.3.21",
  "@swc/jest": "^0.2.23",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.0.0",
  "@types/react": "^17.0.38",
  "@types/react-dom": "^17.0.11",
  "@types/styled-components": "^5.1.19",
  "jest": "^27.0.0",
  "jest-styled-components": "^7.1.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "styled-components": "^5.0.0",
  "typescript": "^4.5.4"

test file

import React from 'react';
import { render, screen } from '@testing-library/react';
import styled from 'styled-components';
import '@testing-library/jest-dom/extend-expect';
import 'jest-styled-components';

const Button = styled.button`
  color: yellow;
`;

describe.only('Test', () => {
  it('works', () => {
    const { container } = render(<Button />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test works 1`] = `
<button
  class="hJBeEn"
/>
`;

jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/mocks/**',
  ],
  coveragePathIgnorePatterns: [],
  testEnvironment: 'jsdom',
  modulePaths: ['<rootDir>/src'],
  transform: {
    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
  },
  modulePaths: ['<rootDir>/src'],
  // testRunner: "jest-jasmine2" // I tried with default and jest-jasmine2
};

cssTransform.js

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    return 'cssTransform';
  },
};

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