Gutenberg: Recommendation how to snapshot custom blocks with jest

[ferdiesletering]

I want to snapshot my custom blocks with jest. I found out how gutenberg is testing its components inside the block library, and I want to do it the same way.

So I have copied this helper to my project and set up a basic block.

However when I run npm test the following error is shown:

When I run npm test the following error is shown

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import EventedTokenizer from './evented-tokenizer';
                                                                                                    ^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (../../../../../../../riad/Workspace/a8c/gutenberg/packages/blocks/src/api/validation.js:4:1)

Block

// block.js
export const name = 'myblock';

export const settings = {
    title: 'title',
    description: 'title',
    icon: {
        background: '#0293b0',
        foreground: '#fff',
        src: 'format-aside',
    },
    edit: () => ( <div>Edit</div> ),
    save: () => ( <div>Save</div> ),
};

Test

// tests/index.js
import { blockEditRender } from '../../../tests/helpers';
import { settings, name } from '../';

it( 'renders correctly when there are no items', () => {
    const wrapper = blockEditRender( name, settings );
        expect( wrapper ).toMatchSnapshot();
} );

I included this package inside my package.json

"@wordpress/blocks": "^6.0.6",

Is there a recommended guide to snapshot custom gutenberg blocks?
I've read the testing guideline https://wordpress.org/gutenberg/handbook/contributors/testing-overview/, but it explains testing more in general then testing a specific gutenberg block with its components.

Thank you

[youknowriad]

Thanks for opening the issue.

I think @Shelob9 had a tutorial somewhere about unit testing Gutenberg blocks.
Alternatively, you can use e2e tests which catch more regressions.

I think this is an area where the community should experiment and figure out the guidelines for the WordPress project.

[Shelob9]

I did write a few on testing (Jest/Enzyme) for React with WordPress devs in mind:

• https://torquemag.io/2018/10/getting-started-with-react-unit-testing-for-wordpress-development/
• https://torquemag.io/2018/11/testing-nested-components-in-a-react-app/

Here is how we use Enzyme to test that our block shows up in the block inserter: https://github.com/CalderaWP/Caldera-Forms/blob/develop/cypress/integration/test.test.js#L46-L67

I am working on more specifically on blocks, but short version -- my opinion is how the block works is WordPress' concern. If the components you use to assemble the block are totally tested, you can assume setAttributes() works.

[iandunn]

Related https://github.com/WordPress/gutenberg-examples/issues/26

[nerrad]

I started encountering this issue today when I refactored a block from importing InspectorControls from @wordpress/editor to @wordpress/block-editor (ya really odd right?).

Anyways, there is a workaround. I pointed the simple-html-token module to a mock via my jest-config:

(just showing the moduleNameMapper key in the json for the config below.

{
   "moduleNameMapper": {
        "simple-html-token": "<rootDir>/path/to/mock/simple-html-token"
   }
}

Then in the mock file ( /path/to/mock/simple-html-token.js) do this:

module.exports = jest.fn();

[nerrad]

I'm guessing the issue here is that the import is coming from a specific es6 directory from the simple-html-tokenizer module:

https://github.com/WordPress/gutenberg/blob/93c5ad329bd407d9b2162dee1113579895939409/packages/blocks/src/api/validation.js#L4

But I still don't get how/why this got triggered by switching from importing @wordpress/block-editor instead of @wordpress/editor unless somehow using the proxies (in this case for InspectorControls) affects how things get transformed.

[gziolo]

This discussion reminds me that we have this line added to Jest config:
https://github.com/WordPress/gutenberg/blob/master/test/unit/jest.config.js#L29

I don’t quite understand why it was added but it should be related.

[nerrad]

ooo ya that would be it! I'm guessing it was added for the same reason we're seeing this issue (to ignore that transform in tests). In other words if you remove it from the gb jest config the same error will probably pop up for gb. I just verified adding that line also fixes the issue.

So likely the issue here is because simple-html-tokenizer does not have a published transpiled version for jest to use so this allows tests to just ignore it.

Since this will also affect plugins that test with imported wp packages, should this ignore pattern be added to the @wordpress/jest-preset-default package? At a minimum, maybe update the testing-overview docs?

[gziolo]

Since this will also affect plugins that test with imported wp packages, should this ignore pattern be added to the @wordpress/jest-preset-default package? At a minimum, maybe update the testing-overview docs?

I opened #15246 which tries to fix it for good with code :)