React-draft-wysiwyg: jest tests with snapshots broken due to random `id`, `aria-*` and `data-*` attributes on each test run

[JustFly1984]

I'm setting up testing environment with jest, and I have issues with testing components on top of

import { Editor } from 'react-draft-wysiwyg'

I have this test output:

    Received value does not match stored snapshot "<Labeled
Editor /> LabeledEditor renders correctly 1".

    - Snapshot
    + Received

    @@ -7,11 +7,11 @@
        >
          labelText
          <div
            aria-label="rdw-wrapper"
            className="inputClassName rdw-editor-wrapper"
    -       id="rdw-wrapper-5728"
    +       id="rdw-wrapper-9281"
            onBlur={[Function]}
            onClick={[Function]}
            style={
              Object {
                "boxSizing": "border-box",
    @@ -425,11 +425,11 @@
              >
                <div
                  className="DraftEditor-editorContainer"
                >
                  <div
    -               aria-describedby="placeholder-87un8"
    +               aria-describedby="placeholder-3m0fk"
                    aria-expanded={null}
                    aria-label="rdw-editor"
                    autoCapitalize="off"
                    autoComplete="off"
                    autoCorrect="off"
    @@ -472,19 +472,19 @@
                      data-contents="true"
                    >
                      <div
                        className=""
                        data-block={true}
    -                   data-editor="87un8"
    -                   data-offset-key="alv7c-0-0"
    +                   data-editor="3m0fk"
    +                   data-offset-key="1o5l9-0-0"
                      >
                        <div
                          className="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
    -                     data-offset-key="alv7c-0-0"
    +                     data-offset-key="1o5l9-0-0"
                        >
                          <span
    -                       data-offset-key="alv7c-0-0"
    +                       data-offset-key="1o5l9-0-0"
                            style={Object {}}
                          >
                            <span
                              data-text="true"
                            >

      38 |       .toJSON()
      39 | 
    > 40 |     expect(tree).toMatchSnapshot()
         |                  ^
      41 |   })
      42 | })
      43 | 

      at Object.toMatchSnapshot (src/components/common/labeled-editor.test.js:40:18)

 › 1 snapshot failed.

Is there any way to fix this behavior by passing some predictable prop value?

[jpuri]

@JustFly1984 : try using these props"

https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L79

https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L83

This ones appears to be specific to draftjs

                          <span
    -                       data-offset-key="alv7c-0-0"
    +                       data-offset-key="1o5l9-0-0"
                            style={Object {}}
                          >

[jpuri]

Check this for last one: https://github.com/facebook/draft-js/issues/1199

[juniorjp]

The following fixed data-offset-key random key errors for me:
jest.mock("draft-js/lib/generateRandomKey", () => () => "123");

[chipcullen]

Just in case anyone else ends up here via googling, @juniorjp 's solution works - you just have to put that jest.mock("draft-js/lib/generateRandomKey", () => () => "123"); in your _test file_ (e.g. storyshots.test.js) not your storybook. (That took me a while to figure out)

[andreluisce]

The solution for the randomly generated id id="rdw-wrapper-XXXX is mocking the Math.random method.

The Editor uses Math.random to generate the ID (code).

An example to mock Math.random you can find here

[pentaphobe]

:warning: Future people: Save yourself some painful time and don't bother trying to mock Math.random - it's used by other parts of Jest and will cause funky behaviour including hanging tests.

I unfortunately used the above suggestion alongside a bunch of test updates and it took quite a while to realise what was broken.

Read @juniorjp and @chipcullen comments for a solution which works