title: React TypeError: Cannot read property 'parentNode' of null after document.getElementByID JEST TESTING
body: <p>I have setup a couple Jest tests but they just are not working and returning this error.</p>
  <pre><code>    TypeError: Cannot read property 'parentNode' of null
       44 |     console.log(document.getElementById(&quot;body&quot;));
       45 |     var title = document.getElementById(&quot;modalTitle&quot;),
     &gt; 46 |       parentTitle = title.parentNode,
  </code></pre>
  <p>When I run the program though it all works properly, no errors, it's just fine. I added some simulated changes to input some fake values into a journal to check if that would help, but it didn't.</p>
  <p>So here is the test code.</p>
  <blockquote>
  <p>DisplayJournal.spec.tsx</p>
  </blockquote>
  <pre><code>import * as React from &quot;react&quot;;
  import { shallow } from &quot;enzyme&quot;;
  import { DisplayJournal } from &quot;./DisplayJournal&quot;;
  import AddJournal from &quot;./AddJournal&quot;;
  
  let mock: any = jest.fn();
  
  const DisplayJournal_Mock = shallow(
    &lt;DisplayJournal
      selectedJournal={{
        id: 1,
        title: &quot;hello&quot;,
        notes: &quot;frog&quot;,
        reference: &quot;Test&quot;,
        date: &quot;12&quot;
      }}
      deselectJournal={mock}
      onClickEditJournal={mock}
      match={mock}
      location={mock}
      //@ts-ignorecls
      history={{ push: mock }}
    /&gt;
  );
  
  test(&quot;DisplayJournal.Render() does not return null.&quot;, () =&gt; {
    expect(DisplayJournal_Mock.type()).not.toBeNull();
    expect(DisplayJournal_Mock.type()).not.toEqual(null);
    expect(DisplayJournal_Mock.get(0)).not.toBeNull();
    expect(DisplayJournal_Mock.get(0)).not.toEqual(null);
  });
  
  test(&quot;DisplayJournal.tsx contains information&quot;, () =&gt; {
    expect(DisplayJournal_Mock.find(&quot;.modalBody&quot;)).not.toBeNull();
    expect(DisplayJournal_Mock.find(&quot;#refPlaceholder&quot;)).not.toBeNull();
    expect(DisplayJournal_Mock.find(&quot;.editButton&quot;)).not.toBeNull();
  });
  
  test(&quot;Checking onClick for edit button can be reached&quot;, () =&gt; {
    const jestFunc = jest.fn();
    const AddJournal_Mock = shallow(
      &lt;AddJournal handleSubmit={() =&gt; this._handleSubmit} /&gt;
    );
  
    AddJournal_Mock.find(&quot;#value&quot;).simulate(&quot;change&quot;, {
      target: jestFunc,
      value: &quot;testVal&quot;,
      preventDefault: jestFunc
    });
    AddJournal_Mock.find(&quot;#notes&quot;).simulate(&quot;change&quot;, {
      target: jestFunc,
      value: &quot;testNotes&quot;,
  
      preventDefault: jestFunc
    });
    AddJournal_Mock.find(&quot;#value&quot;).simulate(&quot;change&quot;, {
      target: jestFunc,
      value: &quot;testName&quot;,
      preventDefault: jestFunc
    });
    AddJournal_Mock.find(&quot;#button&quot;).simulate(&quot;click&quot;, {
      preventDefault: jestFunc
    });
  
    const eventProps = {
      preventDefault: jestFunc
    };
    const button = DisplayJournal_Mock.find(&quot;button&quot;).at(0);
    button.simulate(&quot;click&quot;, eventProps);
    expect(jestFunc).toBeCalled();
  });
  </code></pre>
  <p>And now here is the file that is being tested against and I will BlockQuote the line that is having the issue.</p>
  <pre><code>import * as React from &quot;react&quot;;
  import { Journal } from &quot;../Models&quot;;
  import Modal from &quot;../../../global/components/modal/Modal&quot;;
  import * as css from &quot;../css/journal.scss&quot;;
  import { connect } from &quot;react-redux&quot;;
  import { hideJournal, editJournal } from &quot;../Actions&quot;;
  import { Route, RouteComponentProps, withRouter } from &quot;react-router-dom&quot;;
  import { getNames } from &quot;../Selectors&quot;;
  import { State } from &quot;../Reducers&quot;;
  
  interface Props extends RouteComponentProps {
    selectedJournal: Journal;
    deselectJournal: Function;
    onClickEditJournal: Function;
  }
  interface States {
    title: string;
    body: string;
    name: string;
    date: string;
    names: string[];
  }
  
  var edited = false;
  
  export class DisplayJournal extends React.Component&lt;Props, States&gt; {
    constructor(props: Props) {
      super(props);
      this.state = {
        title: &quot;&quot;,
        body: &quot;&quot;,
        name: &quot;&quot;,
        date: &quot;&quot;,
        names: []
      };
    }
  
    _dismiss(e: React.MouseEvent): void {
      e.stopPropagation();
      e.preventDefault();
    }
  
    handleClick = g =&gt; {
  </code></pre>
  <blockquote>
  <pre><code>    console.log(document.getElementById(&quot;body&quot;));
      var title = document.getElementById(&quot;modalTitle&quot;),
        parentTitle = title.parentNode,
  </code></pre>
  </blockquote>
  <pre><code>      titleInput = document.createElement(&quot;input&quot;);
      var body = document.getElementById(&quot;body&quot;),
        parentBody = body.parentNode,
        bodyInput = document.createElement(&quot;input&quot;);
      var name = document.getElementById(&quot;name&quot;),
        parentName = name.parentNode,
        nameInput = document.createElement(&quot;input&quot;);
      var date = document.getElementById(&quot;date&quot;);
      var currentDate = new Date();
      var day = currentDate.getDate();
      var month = currentDate.getMonth() + 1;
      var year = currentDate.getFullYear();
      var now = day + &quot;/&quot; + month + &quot;/&quot; + year;
  
      titleInput.id = titleInput.name = &quot;title&quot;;
      bodyInput.id = bodyInput.name = &quot;body&quot;;
      nameInput.id = nameInput.name = &quot;name&quot;;
  
      titleInput.type = &quot;text&quot;;
      bodyInput.type = &quot;text&quot;;
      nameInput.type = &quot;text&quot;;
  
      titleInput.value = this.state.title;
      bodyInput.value = this.state.body;
      nameInput.value = this.state.name;
  
      date.innerText = now;
  
      this.setState({ date: now });
  
      parentTitle.replaceChild(titleInput, title);
      parentBody.replaceChild(bodyInput, body);
      parentName.replaceChild(nameInput, name);
  
      titleInput.addEventListener(&quot;blur&quot;, this.onBlurEdit, false);
      bodyInput.addEventListener(&quot;blur&quot;, this.onBlurEdit, false);
      nameInput.addEventListener(&quot;blur&quot;, this.onBlurEdit, false);
    };
  
    onBlurEdit = e =&gt; {
      if (e.target.name === &quot;title&quot;) {
        let titleVal = e.target.value;
        this.setState({ title: titleVal });
      } else if (e.target.name === &quot;body&quot;) {
        let bodyVal = e.target.value;
        this.setState({ body: bodyVal });
      } else if (e.target.name === &quot;name&quot;) {
        let nameVal = e.target.value;
        this.setState({ name: nameVal });
      }
  
      edited = true;
  
      //@ts-ignore
      let id = this.props.match.params.id;
      let title = this.state.title;
      let body = this.state.body;
      let name = this.state.name;
      let date = this.state.date;
  
      this.props.onClickEditJournal(id, title, body, name, date);
    };
  
    render() {
      const { selectedJournal } = this.props;
      const Button = () =&gt; (
        &lt;Route
          render={({ history }) =&gt; (
            &lt;span
              className={css.viewJournalCloseButton}
              title=&quot;Close the modal dialog&quot;
              onClick={() =&gt; {
                this.props.history.push(&quot;/journal&quot;);
              }}
            &gt;
              X
            &lt;/span&gt;
          )}
        /&gt;
      );
  
      if (selectedJournal == null) return null;
  
      if (edited == true) {
        selectedJournal.title = this.state.title;
        selectedJournal.notes = this.state.body;
        selectedJournal.reference = this.state.name;
        selectedJournal.date = this.state.date;
      }
  
      return (
        &lt;Modal title={selectedJournal.title}&gt;
          &lt;Button /&gt;
          &lt;div className={css.modalBody}&gt;
            &lt;div&gt;
              &lt;div className={css.displayNotes}&gt;
                &lt;div id=&quot;body&quot; className={css.notesSpan}&gt;
                  {selectedJournal.notes}
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className={css.row2}&gt;
                &lt;div className={css.displayTogether}&gt;
                  &lt;div className={css.referenceSpan}&gt;
                    &lt;span id=&quot;refPlaceholder&quot;&gt;Written by:&lt;/span&gt;
                    &lt;span id=&quot;name&quot;&gt;{selectedJournal.reference}&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className={css.displayTogether}&gt;
                  &lt;div className={css.dateSpan}&gt;
                    Date created:
                    &lt;span id=&quot;date&quot;&gt;{selectedJournal.date}&lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;button className={css.editButton} onClick={this.handleClick}&gt;
                Edit
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
      );
    }
  }
  
  const mapStateToProps = (state: State) =&gt; ({
    names: getNames(state)
  });
  const mapDispatchToProps = {
    _dismiss: hideJournal,
    onClickEditJournal: editJournal
  };
  
  export default connect&lt;any, any, any, any&gt;(
    mapStateToProps,
    mapDispatchToProps
  )(withRouter(DisplayJournal));
  </code></pre>