Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PrettyFormatPluginError: Cannot delete property 'className' of #<Object> #2642

Open
Fafruch opened this issue Feb 17, 2022 · 4 comments · May be fixed by #2959
Open

PrettyFormatPluginError: Cannot delete property 'className' of #<Object> #2642

Fafruch opened this issue Feb 17, 2022 · 4 comments · May be fixed by #2959
Labels
bug needs triage

Comments

@Fafruch
Copy link

Fafruch commented Feb 17, 2022

Current behavior:

Components that have a static defaultProps (with className set to '') cannot be serialized using the @emotion/jest/enzyme-serializer (and probably also with @emotion/jest/serializer as it's using shared logic).

The tests are throwing:

PrettyFormatPluginError: Cannot delete property 'className' of #<Object>
TypeError: Cannot delete property 'className' of #<Object>

      at clean (node_modules/@emotion/jest/dist/create-serializer-3afd473f.cjs.dev.js:506:19)
      at Object.serialize (node_modules/@emotion/jest/dist/create-serializer-3afd473f.cjs.dev.js:537:5)
      at Object.serialize (node_modules/@emotion/jest/dist/create-enzyme-serializer-c92dc591.cjs.dev.js:31:32)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/pretty-format/build/plugins/lib/markup.js:73:13
          at Array.map (<anonymous>)
      at printChildren (node_modules/pretty-format/build/plugins/lib/markup.js:67:6)
      at Object.serialize (node_modules/pretty-format/build/plugins/ReactElement.js:144:35)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at Object.serialize (node_modules/@emotion/jest/dist/create-serializer-3afd473f.cjs.dev.js:539:22)
      at Object.serialize (node_modules/@emotion/jest/dist/create-enzyme-serializer-c92dc591.cjs.dev.js:31:32)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/pretty-format/build/plugins/lib/markup.js:33:21
          at Array.map (<anonymous>)
      at printProps (node_modules/pretty-format/build/plugins/lib/markup.js:31:6)
      at Object.serialize (node_modules/pretty-format/build/plugins/ReactTestComponent.js:45:36)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at Object.serialize (node_modules/@emotion/jest/dist/create-serializer-3afd473f.cjs.dev.js:539:22)
      at Object.serialize (node_modules/@emotion/jest/dist/create-enzyme-serializer-c92dc591.cjs.dev.js:31:32)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at node_modules/@emotion/jest/dist/create-enzyme-serializer-c92dc591.cjs.dev.js:26:18
      at Object.print (node_modules/enzyme-to-json/createSerializer.js:21:14)
      at Object.serialize (node_modules/@emotion/jest/dist/create-enzyme-serializer-c92dc591.cjs.dev.js:24:33)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at format (node_modules/pretty-format/build/index.js:567:16)
      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:386:30)
      at Object.throwingMatcher (node_modules/expect/build/index.js:387:15)
      at Object.<anonymous> ([redacted])

Looks like t's failing on this line:
https://github.com/emotion-js/emotion/blob/main/packages/jest/src/create-serializer.js#L174

To reproduce:

Define a component with defaultProps. Use either the syntax:

class SomeComponent extends Component {
  static defaultProps = {
     className: ''
  }
 // ...
}

or

class SomeComponent extends Component {
  // ...
}
SomeComponent.defaultProps = {
  className: '',
}

then prepare a test where this component is used and serialized to a snapshot:

import React from "react";
import { shallow } from "enzyme";
import SomeComponent from "./SomeComponent";

Enzyme.configure({ adapter: new Adapter() });

describe("SomeComponent", () => {
  it("should match snapshot", function () {
    const node = shallow(<SomeComponent />);
    expect(node).toMatchSnapshot();
  });
});

Expected behavior:

Test should run and either fail if snapshots are not matching, or succeed if they are matching.

Actual behavior:
The test fails on the serialization process.

Environment information:

  • react version: ^17.0.2
  • @emotion/css version: 11.5.0
  • @emotion/jest version: 11.5.0
  • @emotion/react version: 11.5.0
  • @emotion/styled version: 11.3.0
  • jest version: ^27.5.1
  • ts-jest version: ^27.1.3
  • babel-jest version: ^27.5.1

Jest config:

  {
      preset: 'ts-jest/presets/js-with-babel',
      displayName: 'client',
      automock: false,
      timers: 'legacy',
      testTimeout: 20000,
      testRunner: 'jest-jasmine2',
      verbose: true,
      coveragePathIgnorePatterns: [
         // [redacted]
      ],
      collectCoverageFrom: [
         // [redacted]
      ],
      testPathIgnorePatterns: [
         // [redacted]
      ],
      snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
      testEnvironment: 'jsdom',
      setupFiles: ['<rootDir>/jest-setup.js'],
      globals: {
        window: {},
        document: {},
        'ts-jest': {
          diagnostics: false,
        },
      },
      transformIgnorePatterns: [
          // [redacted]
      ],
      transform: {
        '^.+\\.(ts|tsx)?$': 'ts-jest',
        '^.+\\.(js|jsx)$': 'babel-jest',
      },
    }
@Andarist
Copy link
Member

I've added such tests locally and they pass:
6f678f8

You'd have to provide a full runnable repro case for me to investigate it any further.

@jeremy-davis-sonarsource jeremy-davis-sonarsource linked a pull request Dec 21, 2022 that will close this issue
Open
4 tasks
@jeremy-davis-sonarsource
Copy link

jeremy-davis-sonarsource commented Dec 21, 2022 •
edited

Hi, I managed to reproduce this consistently with a node passed in a render prop:
PR #2959

(I'll try to find the cause and submit a real PR if I find the time 😅 )

jeremy-davis-sonarsource added a commit to jeremy-davis-sonarsource/emotion that referenced this issue Jan 6, 2023
@jeremy-davis-sonarsource
Fix an issue that broke serialization (emotion-js#2642)
ce90865
@jeremy-davis-sonarsource
Copy link

Forgot to mention here that I updated my PR to suggest a fix!

jeremy-davis-sonarsource added a commit to jeremy-davis-sonarsource/emotion that referenced this issue Mar 23, 2023
@jeremy-davis-sonarsource
Fix an issue that broke serialization (emotion-js#2642)
fd87787
jeremy-davis-sonarsource added a commit to jeremy-davis-sonarsource/emotion that referenced this issue Aug 14, 2023
@jeremy-davis-sonarsource
Fix an issue that broke serialization (emotion-js#2642)
c3ab81e
@shannonhochkins
Copy link

@Andarist - are you able to get this merged?

jeremy-davis-sonarsource added a commit to jeremy-davis-sonarsource/emotion that referenced this issue Mar 15, 2024
@jeremy-davis-sonarsource
Fix an issue that broke serialization (emotion-js#2642)
0b695c2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix jest serialization issue (#2642) jeremy-davis-sonarsource/emotion
4 participants
@shannonhochkins @Andarist @Fafruch @jeremy-davis-sonarsource