title: Jest + React JS testing component
body: <p>I am just getting acquainted with testing and I have a little problem. I'm trying to test the functions of a component that change state and call functions of a document. In the documentation of Jest and Enzyme, I did not find the right example. Here is a sample code: </p>
  
  <pre><code>class EditableText extends React.PureComponent {
  constructor(props) {
      super(props);
      this.state = {
          isEditing: false,
          currentValue: null
      };
      this.textAreaRef = React.createRef();
  }
  onClick = () =&gt; {
      if (!this.state.isEditing) {
          this.setState({ isEditing: true });
          setTimeout(() =&gt; {
              this.textAreaRef.current.focus();
          }, 100);
          document.addEventListener('keydown', this.onKeyDown);
          document.addEventListener('click', this.onOutsideClick);
      }
  };
  onOutsideClick = e =&gt; {
      if (e.target.value !== this.state.currentValue) {
          this.closeEditMode();
      }
  };
  closeEditMode() {
      this.setState({ isEditing: false });
      document.removeEventListener('keydown', this.onKeyDown);
      document.removeEventListener('click', this.onOutsideClick);
  }
  onKeyDown = e =&gt; {
      if (e.code === 'Enter') {
          this.onUpdateValue();
      } else if (e.code === 'Escape') {
          this.closeEditMode();
      }
  };
  onUpdateValue = () =&gt; {
      this.props.onSubmit(this.state.currentValue || this.props.value);
      this.closeEditMode();
  };
  render() {
      const { isEditing, currentValue } = this.state;
      const { value } = this.props;
      return isEditing ? (
          &lt;TextArea
              className="editable-text__textarea"
              ref={this.textAreaRef}
              onClick={this.onClick}
              value={currentValue === null ? value || '' : currentValue}
              onChange={(_e, { value }) =&gt; this.setState({ currentValue: value })}
          /&gt;
      ) : (
              &lt;div className="editable-text__readonly" onClick={this.onClick}&gt;
                  &lt;div&gt;{this.props.children}&lt;/div&gt;
                  &lt;div className="editable-text__icon-container"&gt;
                      &lt;Icon name="edit" className="editable-text__icon" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How to test functions, that receive and change state and calls document.addEventListener? Please, help. </p>
  
  <p>UPDATE > Tests i already wrote:</p>
  
  <pre><code>describe('tests of component', () =&gt; {
    test('Component renders correctly with isEditing=false', () =&gt; {
      const component = renderer
        .create(&lt;EditableText children="I'm text in EditableText" /&gt;)
        .toJSON();
      expect(component).toMatchSnapshot();
    });
  
    test('Component changes to isEditing=true when clicked on it', () =&gt; {
      const component = renderer
        .create(&lt;EditableText /&gt;);
  
      let tree = component.toJSON();
      tree.props.onClick();
      tree = component.toJSON();
      expect(tree).toMatchSnapshot();
    });
  
  });
  
  describe('tests of logic', () =&gt; {
    test.only('OnClick should change state and add event listeners', ()=&gt; {
      const state = { isEditing: false, currentValue: null }
      global.document.addEventListener = jest.fn();
      EditableText.onClick(() =&gt; {
        expect(global.document.addEventListener).toHaveBeenCalled();
      });;
    });
  });
  </code></pre>