title: my data test id is there but my test cannot find it react enzyme jest unit tests
body: <p>I am still new to unit testing with jest and enzyme,
  I have a data-test-id and I am trying to make a unit test using that. Yet, I get an error saying that the data-test-id was not found.</p>
  <p>I have the following</p>
  <pre><code>import React from 'react';
  import Adapter from 'enzyme-adapter-react-16';
  import { configure, mount, shallow } from 'enzyme';
  import { shallowToJson } from 'enzyme-to-json';
  
  import ConfirmationModal from '../src/components/GlobalForm/ConfirmationModal/ConfirmationModal';
  
  configure({ adapter: new Adapter() });
  
  describe('ConfirmationModal', () =&gt; {
    it('should be defined', () =&gt; {
      expect(ConfirmationModal).toBeDefined();
    });
  
    it('should render correctly', () =&gt; {
      const tree = mount(&lt;ConfirmationModal /&gt;);
      expect(shallowToJson(tree)).toMatchSnapshot();
    });
  
    it('should have a cancel button', () =&gt; {
      const wrapper = shallow(&lt;ConfirmationModal /&gt;);
      const ConfirmationModalComponent = wrapper.find(&quot;[data-test-id='cancel-submit-btn']&quot;);
      expect(ConfirmationModalComponent.length).toBe(1);
    });
  });
  </code></pre>
  <p>Even my snapshot test shows that I have this data-test-id</p>
  <pre><code>exports[`ConfirmationModal should render correctly 1`] = `
  &lt;confirmationModal&gt;
    &lt;Styled(div)&gt;
      &lt;div
        className=&quot;css-d2ogfy&quot;
      &gt;
        &lt;Styled(div)&gt;
          &lt;div
            className=&quot;css-ywnjte&quot;
          &gt;
            Confirm your submission
          &lt;/div&gt;
        &lt;/Styled(div)&gt;
        &lt;Styled(p)&gt;
          &lt;p
            className=&quot;css-1v1a1rr&quot;
          &gt;
            The submission of your changes will directly affect the call center with which they are assigned.
          &lt;/p&gt;
        &lt;/Styled(p)&gt;
        &lt;Styled(p)&gt;
          &lt;p
            className=&quot;css-1v1a1rr&quot;
          &gt;
            Are you sure that you want to proceed with these changes?
          &lt;/p&gt;
        &lt;/Styled(p)&gt;
        &lt;Styled(div)&gt;
          &lt;div
            className=&quot;css-wqsxq7&quot;
          &gt;
            &lt;Button
              dataTestId=&quot;cancel-submit-btn&quot;
              name=&quot;Cancel&quot;
            &gt;
              &lt;Styled(button)
                data-test-id=&quot;cancel-submit-btn&quot;
              &gt;
                &lt;button
                  className=&quot;css-2ba12r&quot;
                  data-test-id=&quot;cancel-submit-btn&quot;
                &gt;
                  Cancel
                &lt;/button&gt;
              &lt;/Styled(button)&gt;
            &lt;/Button&gt;
            &lt;Button
              dataTestId=&quot;confirm-submit-btn&quot;
              name=&quot;Confirm&quot;
            &gt;
              &lt;Styled(button)
                data-test-id=&quot;confirm-submit-btn&quot;
              &gt;
                &lt;button
                  className=&quot;css-2ba12r&quot;
                  data-test-id=&quot;confirm-submit-btn&quot;
                &gt;
                  Confirm
                &lt;/button&gt;
              &lt;/Styled(button)&gt;
            &lt;/Button&gt;
          &lt;/div&gt;
        &lt;/Styled(div)&gt;
      &lt;/div&gt;
    &lt;/Styled(div)&gt;
  &lt;/confirmationModal&gt;
  `;
  </code></pre>
  <p>but my test results with the error:</p>
  <blockquote>
  <p>ConfirmationModal › should have a cancel button</p>
  <pre><code>expect(received).toBe(expected) // Object.is equality
  
  Expected: 1
  Received: 0
  </code></pre>
  </blockquote>
  <p>How???? it's right there...</p>