Jest Snapshot testing on Gutenberg React Custom Blocks

38 views Asked by At

I tried to set up a working Jest environment inside a Wordpress plugin. Gutenberg blocks are split between an edit.jsx component and a save.jsx component. My issue stands when I try to create a snapshot test for such blocks.

For example I tried to create a test file like so:

import renderer from 'react-test-renderer';
import edit from '../../blocks/myblock/edit.jsx';

it('comparing with block snapshot', () => {
    const tree = renderer
        .create(<edit/>)
        .toJSON();
    expect(tree).toMatchSnapshot();
});

but the snapshot that Jest creates is this one

exports[`comparing with block snapshot 1`] = `<edit />`;

the block has a return statement with much HTML inside.

How do I make jest render all the HTML in edit.jsx? Why am I getting only that <edit /> tag in the snapshot?

0

There are 0 answers