Snapshot output shows no change

[johnstew]

Hi there, I'm attempting to use this library to help inject styles into my snapshots as advertised and sadly I'm not having any luck. I was hoping I would at least get an error but I get nothing.

Following the example in the docs I have this:

import React from 'react';
import styled from 'styled-components';
import renderer from 'react-test-renderer';

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

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});

Output:

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

exports[`it works 1`] = `
<button
  className="kQBUXH"
/>
`;

I was expecting to see the styles and hashes replaced but I don't get any of that and no errors at all. I tried digging in a bit and it looks like one issue is the masterSheet.names Map is empty. Not sure why that's the case but I tried removing all the plugins I have in my jest.setup.ts file and trying to access the masterSheet.names myself and it is indeed empty so not sure whats going on.

Here are my plugins and package versions:

// package.json
{
    "@testing-library/dom": "^7.26.3",
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.1.9",
    "jest": "^26.2.1",
    "jest-dom": "^4.0.0",
    "jest-styled-components": "^7.0.3",
    "react-testing-library": "^8.0.1",
    "styled-components": "^5.2.1",
    "ts-jest": "^26.1.4",
}

// jest.config.js
module.exports = {
  verbose: true,
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  preset: 'ts-jest',
  setupFiles: ['raf/polyfill'],
  setupFilesAfterEnv: ['./jest.setup.ts'],
  moduleDirectories: ['node_modules', 'src'],
  testPathIgnorePatterns: [
    'dist',
    '.storybook',
    'webpack',
    'ts-output',
    'scripts',
    'types/lib',
  ],
};

// jest.setup.ts
import 'jest-styled-components';
import '@testing-library/jest-dom/extend-expect';

Any help here greatly appreciated. Thank you

[fritz-c]

Try removing the .toJSON() from const tree = renderer.create(<Button />).toJSON(); in your test, and see what that gets you.