Snapshot testing returning empty object with jest and preact

Current behavior

shallow and mount are returning ShallowWrapper{} and ReactWrapper{} when used with jest and preact. I’ve used enzyme-with-json for serialization, which returns the expected result, but expect fails when used with toMatchSnapshot since it compares it with Empty Object.

import { shallowToJson } from 'enzyme-to-json';
import { shallow } from 'enzyme';
import Loader from './index';

describe('Loader Component', () => {
  it('should render correctly', () => {
    const component = shallow(<Loader />);
    console.log(component); // returns ShallowWrapper{}
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

Expected behavior

The snapshot should return correct output of the contents of <Loader /> component, and the test should pass.

Content received by the test are :

<div className="loader u-RTLPositive" style={Object {"width": "30px"}}>
      <svg className="loader__circular" viewBox="25 25 50 50">
        <circle className="loader__path" cx="50" cy="50" r="20" fill="none" strokeMiterlimit="10" />
      </svg>
 </div>

And Snapshot, to which it is compared is : ShallowWrapper {}

Your environment

“preact” : 10.3.3, “jest”: 26.0.1, “jest-enzyme”: 7.1.2 “enzyme-to-json”: 3.5.0

Here’s my setup file provided to Jest :

import { configure } from 'enzyme';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-preact-pure';

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

API

• [✔️] shallow
• [✔️] mount
• [✔️] render

Version

library	version
enzyme	3.11.0
react	N/A
react-dom	N/A
react-test-renderer	N/A
adapter (below)

Adapter

• [✔️ ] others (enzyme-adapter-preact-pure : 2.2.0 )

[saher-elgendy]

@cadence09 thank you but i am trying for two days now, tried everything possible and the solution was just to press u after the the snapshot fail in the first time!!!

[ljharb]

Since this seems to be an issue with whatever snapshotting tool you’re using, and not with enzyme, I’ll close this.

(I’d suggest avoiding snapshot testing - in practice, devs just end up rubber-stamping them, and they aren’t actually testing things about your components that are important)