title: getting TypeError: expect(...).toBeInTheDocument is not a function
body: <p>I am trying to do unit testing with my sidebar component, to check if the text rendered is in the document flow or not, well it is in the document flow but the test case gets failed saying &quot;<em><strong>TypeError: expect(...).toBeInTheDocument is not a function</strong></em>&quot;.
  I don't know why it is so, I also imported the jest library in the file still getting same error, please help me.</p>
  <p>sidebar.spec.js file</p>
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import { render, screen } from '@testing-library/react';
  import '@testing-library/jest-dom';
  import configureStore from 'redux-mock-store';
  import toJson from 'enzyme-to-json';
  import { Provider } from 'react-redux';
  
  import Sidebar from './sidebar';
  
  describe('Testing Sidebar component', () =&gt; {
      let wrapper, store;
      const mockStore = configureStore();
      const initialProp = {
          auth: {
              userAuth: {
                  firstName: &quot;savitha&quot;,
                  lastName: &quot;goel&quot;
              }
          },
          meta: {
              productsMeta: [
                  { label: &quot;CX Admin Application&quot; },
                  { label: &quot;Application Configuration Management&quot; }
              ]
          }
      };
  
      beforeEach(() =&gt; {
          store = mockStore(initialProp);
          wrapper = shallow(&lt;Sidebar store={store} /&gt;);
      });
  
      it('should be defined', () =&gt; {
          expect(wrapper).toBeDefined();
      });
  
      it('renders correctly', () =&gt; {
          expect(toJson(wrapper)).toMatchSnapshot();
      });
  
      it('render sidebar options as a text', () =&gt; {
          store = mockStore(initialProp);
          wrapper = shallow(
              &lt;Provider store={store}&gt;
                  &lt;Sidebar /&gt;
              &lt;/Provider&gt;
          );
  
          console.log(store);
  
          console.log(screen.debug(null, Infinity))
          // const sidebarElement = screen.getByText('Application Manager');
          // expect(sidebarElement).toBeInTheDocument();
      });
  });
  
  </code></pre>
  <p>my sidebar.js file</p>
  <pre><code>import React, { Component } from 'react'
  import { connect } from 'react-redux';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faAngleDown, faWrench, faUserCircle, faHome, faDigitalTachograph, faMicrophone, faRecordVinyl } from '@fortawesome/free-solid-svg-icons';
  import './_sidebar.scss';
  
  class Sidebar extends Component {
      handleProductSelection(product) {
          this.props.props.history.push(product.path);
      }
  
      renderProducts = () =&gt; {
      if(this.props.products) {
        return this.props.products.map((product) =&gt; {
          return (&lt;li onClick={() =&gt; this.handleProductSelection(product)}&gt;{product.label}&lt;/li&gt;);
        });
      }
      }
  
      render() {
          return(
        &lt;div className=&quot;sidebar&quot;&gt;
          &lt;div className=&quot;profileWrap&quot;&gt;
            &lt;div&gt;
              &lt;div className=&quot;userNameWrap&quot;&gt;
                &lt;FontAwesomeIcon icon={faUserCircle} /&gt;
                &lt;span className=&quot;userName&quot;&gt;{this.props.firstName} {this.props.lastName}&lt;/span&gt;
                &lt;span className=&quot;angleIcon&quot;&gt;&lt;FontAwesomeIcon icon={faAngleDown} /&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;userInfoWrap&quot;&gt;
                &lt;ul&gt;
                  &lt;li&gt;My profile&lt;/li&gt;
                  &lt;li&gt;Help with Console&lt;/li&gt;
                  &lt;li&gt;Contact us&lt;/li&gt;
                  &lt;li&gt;Log out&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div className=&quot;divisionWrap&quot;&gt;
                Division:
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;sidebarNavigation&quot;&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;div className=&quot;mainMenu&quot;&gt;
                  &lt;FontAwesomeIcon icon={faHome} /&gt;
                  &lt;span className=&quot;menuName&quot;&gt;Home&lt;/span&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div className=&quot;mainMenu&quot;&gt;
                  &lt;FontAwesomeIcon icon={faDigitalTachograph} /&gt;
                  &lt;span className=&quot;menuName&quot;&gt;Mosaic Insights&lt;/span&gt;
                  &lt;span className=&quot;angleIcon&quot;&gt;&lt;FontAwesomeIcon icon={faAngleDown} /&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className=&quot;subMenu&quot;&gt;
                  &lt;ul&gt;
                    {this.renderProducts()}
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div className=&quot;mainMenu&quot;&gt;
                  &lt;FontAwesomeIcon icon={faWrench} /&gt;
                  &lt;span className=&quot;menuName&quot;&gt;Application Manager&lt;/span&gt;
                  &lt;span className=&quot;angleIcon&quot;&gt;&lt;FontAwesomeIcon icon={faAngleDown} /&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className=&quot;subMenu&quot;&gt;
                  &lt;ul&gt;
                    {this.renderProducts()}
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div className=&quot;mainMenu&quot;&gt;
                  &lt;FontAwesomeIcon icon={faMicrophone} /&gt;
                  &lt;span className=&quot;menuName&quot;&gt;Call Recording&lt;/span&gt;
                  &lt;span className=&quot;angleIcon&quot;&gt;&lt;FontAwesomeIcon icon={faAngleDown} /&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className=&quot;subMenu&quot;&gt;
                  &lt;ul&gt;
                    {this.renderProducts()}
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div className=&quot;mainMenu&quot;&gt;
                  &lt;FontAwesomeIcon icon={faWrench} /&gt;
                  &lt;span className=&quot;menuName&quot;&gt;Console Administration&lt;/span&gt;
                  &lt;span className=&quot;angleIcon&quot;&gt;&lt;FontAwesomeIcon icon={faAngleDown} /&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className=&quot;subMenu&quot;&gt;
                  &lt;ul&gt;
                    {this.renderProducts()}
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
      }
  }
  
  
  const mapStateToProps = (state) =&gt; {
    return{
      firstName: state.auth.userAuth.firstName,
      lastName: state.auth.userAuth.lastName,
      products: state.meta.productsMeta
    };
  };
  
  export default connect(mapStateToProps)(Sidebar);
  
  </code></pre>