[Bug]: babel-plugin-styled-components is ignored/not working

[Kevin Olesker]

Version

29.0.5

Steps to reproduce

1. Clone my repo https://github.com/kolesker/ts-jest-styled-display-name-bug
2. Choose jest-26 or jest-29 paths to test
3. npm install
4. npm run test

Expected behavior

In ts-jest 26 you get as snapshot:

"<Component>
  <StyledExample>
    <div className=\\"test-issue__StyledExample-sc-yycgxi-0 cxgDRm\\" />
  </StyledExample>
</Component>"
`;

Actual behavior

In ts-jest 29 you get as snapshot:

"<Component>
  <StyledExample>
    <div className=\\"sc-beySbM AIKwo\\" />
  </StyledExample>
</Component>"
`;

Debug log

I can't add the file

Additional context

In the migration from Jest and ts-jest 26 to 29, all of our snapshots are breaking since displayName attribute of babel-styled-components plugin is being ignored. Actually, the issue was introduced when migrating from 26 to 27, but it wasn't solved in the latest 29 version.

The problem is display names are being completely ignored, while in runtime (non-test environment) it is working OK. Also the issue is only happening after moving out from v26.

Environment

System:
    OS: macOS 12.6.3
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
    npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm

[Ahn]

If you remove preset, it will work. This is a part of breaking change in v29, see more at https://kulshekhar.github.io/ts-jest/docs/getting-started/options

[Kevin Olesker]

Hi @ahnpnl , I removed preset from jest.config.js and the issue still persists. No change on the behavior.

[Ahn]

Hi, you can check this PR #4083 for example config

[Kevin Olesker]

Hi @ahnpnl, replaced preset: "ts-jest" by ...preset.defaults with a const preset = require('ts-jest/presets'); at the top of jest.config.js file and still the same issue.

Note the issue was introduced in ts-jest 27, just upgrading from 26 to 27, it triggers the issue. Please we need help to migrate.

[Ahn]

So i debugged your project, I saw different output

jest 26

// compiled index.tsx

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
const StyledExample = _styledComponents.default.div.withConfig({
  displayName: "test-issue__StyledExample",
  componentId: "sc-yycgxi-0"
})(["display:block;"]);
StyledExample.displayName = 'StyledExample';
const Component = () => /*#__PURE__*/_react.default.createElement(StyledExample, null);
var _default = Component;
exports.default = _default;

jest 29

// compiled index.tsx

"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};
Object.defineProperty(exports, "__esModule", {
  value: true
});
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const StyledExample = styled_components_1.default.div`
  display: block;
`;
StyledExample.displayName = 'StyledExample';
const Component = () => react_1.default.createElement(StyledExample, null);
exports.default = Component;

When debugging, I saw babel-jest picked up things and tried to process the output. However, Idk why the output was different. Here is the debug of how babel-jest v29 resolved the config

In this picture, you would see it picked up correctly the plugin, indicated by file request="babel-plugin-styled-components

In this case, the output which was produced by babel-jest seemed to change and ts-jest doesn't have control about it.

[Kevin Olesker]

Hi @ahnpnl, so you're saying the issue is produced by babel-jest?

[Ahn]

There is an issue open for that plug-in styled-components/babel-plugin-styled-components#343 I think the plug-in has issue, I don’t think it’s Babel-jest