How to view Jest snapshot in test

Question

Is there a way to check the actual snapshot taken by Jest when running a snapshot test? So if I have a component with a fancy date thing that's supposed to show Today or Yesterday, how can I pull that out of the snapshot to make sure the correct string is showing? This is my current code:

import renderer from 'react-test-renderer';

const props = {
  fancy_date = 'Today'
};

test('ProviderReview renders without crashing', () => {

const component = renderer.create(
  <MyComponent {...props}>
);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();

Looking at both the component and the tree just give me generic structures filled with stuff like [Objects] and children: [Array]. I can see the snapshot that is generated by the test, and it has Today shown in the HTML rendering. So how do I access the HTML rendering from within the test code, or a JSON representation of the HTML, or anything that actually shows the value of that Today label?

Answer 1

You can use the find methods on the Test Instance to find the specific element you are looking for, then test it using props like children:

const SimpleComponent = () => (
  <div>
      <h1>Today</h1>
  </div>
);

describe('SimpleComponent', () => {
  it('says Today in the h1', () => {
    const component = renderer.create(<SimpleComponent/>);
    expect(component.root.findByType('h1').children).toEqual(['Today']);
  });
});

Answer 2

I don't believe this is possible. One issue is that there is no styling in the snapshots unless you only use inline styles, so whatever you view in the browser won't be what the actual end user sees so it likely won't be very helpful anyway.

I stumbled onto this post as I'm also hoping to achieve the same thing but the only way I imagine this can be done is if there were a plugin available, which I haven't had any luck searching for. If you find a way to do this please let me know!

Answer 3

Whenever you do snapshot testing a folder called snapshots is created. When you create something and run snapshot test then you will get error , & that error will show what has changed.

Answer 4

I have the exact the same problem but there is no available solution yet, so I made a library Jest Preview to view the Jest tests in browser like Chrome.

You just need to execute preview.debug() to view your app when testing in Jest in the browser:

import preview from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);

    preview.debug();
  });
});

This is a demo of Jest Preview:

Jest Preview is in early development but has pretty many supports, for example:

• ? Support CSS:
  • ? Direct CSS import
  • ? Styled-components
  • ? External CSS
  • ? CSS Modules
  • ? Sass
• ? Support viewing images.

Install the library:

npm install --save-dev jest-preview
#Or
yarn add --dev jest-preview
pnpm install --dev jest-preview

You can read more about library at https://www.jest-preview.com/docs/getting-started/intro