React + Jest + Enzyme: testing dynamic w values toMatchSnapshot, on example with 'react-draft-wysiwyg'

MyForm.test.jsx

import { shallow } from 'enzyme';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Editor } from 'react-draft-wysiwyg';
import MyForm from '../MyForm';
import renderer from 'react-test-renderer';

const withRouter = (component: React.ReactElement) => {
    return <BrowserRouter>{component}</BrowserRouter>;
};

describe('Test my form', () => {
        it('has expected structure (snapshot)', () => {
                const component = (<MyForm />);
                const wrapper = shallow(component);
                const wrappedComponent = withRouter(component);
                const created = renderer.create(wrappedComponent);
                const root = created.root;
                const editor = root.findByType(Editor);

                expect(editor.props.editorClassName).toBe('react-draft-wysiwyg-editor');

                /**
                 * Here I used Raw HTML approach
                 * because once some of the editor attributes values are dynamic
                 * like: data-offset-key="bo40a-0-0", data-editor="8h0pr", id="rdw-wrapper-4595"
                 * we need to remove randomness in those values
                 */
                const div = document.createElement('div');

                div.innerHTML = wrapper.html();

                div.querySelector('.rdw-editor-wrapper').setAttribute('id', 'rdw-wrapper-123');

                div.querySelectorAll('[data-offset-key]').forEach((el) => {
                    el.setAttribute('data-offset-key', 'data-offset-key-123');
                });

                div.querySelectorAll('[data-editor]').forEach((el) => {
                    el.setAttribute('data-editor', 'data-editor-123');
                });

                expect(div).toMatchSnapshot();
            });
});