my data test id is there but my test cannot find it react enzyme jest unit tests

Question

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.

I have the following

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', () => {
  it('should be defined', () => {
    expect(ConfirmationModal).toBeDefined();
  });

  it('should render correctly', () => {
    const tree = mount(<ConfirmationModal />);
    expect(shallowToJson(tree)).toMatchSnapshot();
  });

  it('should have a cancel button', () => {
    const wrapper = shallow(<ConfirmationModal />);
    const ConfirmationModalComponent = wrapper.find("[data-test-id='cancel-submit-btn']");
    expect(ConfirmationModalComponent.length).toBe(1);
  });
});

Even my snapshot test shows that I have this data-test-id

exports[`ConfirmationModal should render correctly 1`] = `
<confirmationModal>
  <Styled(div)>
    <div
      className="css-d2ogfy"
    >
      <Styled(div)>
        <div
          className="css-ywnjte"
        >
          Confirm your submission
        </div>
      </Styled(div)>
      <Styled(p)>
        <p
          className="css-1v1a1rr"
        >
          The submission of your changes will directly affect the call center with which they are assigned.
        </p>
      </Styled(p)>
      <Styled(p)>
        <p
          className="css-1v1a1rr"
        >
          Are you sure that you want to proceed with these changes?
        </p>
      </Styled(p)>
      <Styled(div)>
        <div
          className="css-wqsxq7"
        >
          <Button
            dataTestId="cancel-submit-btn"
            name="Cancel"
          >
            <Styled(button)
              data-test-id="cancel-submit-btn"
            >
              <button
                className="css-2ba12r"
                data-test-id="cancel-submit-btn"
              >
                Cancel
              </button>
            </Styled(button)>
          </Button>
          <Button
            dataTestId="confirm-submit-btn"
            name="Confirm"
          >
            <Styled(button)
              data-test-id="confirm-submit-btn"
            >
              <button
                className="css-2ba12r"
                data-test-id="confirm-submit-btn"
              >
                Confirm
              </button>
            </Styled(button)>
          </Button>
        </div>
      </Styled(div)>
    </div>
  </Styled(div)>
</confirmationModal>
`;

but my test results with the error:

ConfirmationModal › should have a cancel button

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

How???? it's right there...

Answer 1

Answering because this question appeared first when I googled data-testid and enzyme.

Try this instead:

wrapper.find({ "data-testid": "cancel-submit-btn" }).simulate("click");

This blog post covers react enzyme snapshot testing in detail. I've added the example above in case the blog post is ever removed.

Answer 2

not sure what your ConfirmationModal component looks like, but my guess is that it wrapped in some styling as your snapshot suggests: <Styled(div)>

Between your snapshot test and the one where you are trying to find data-test-id, the first one mounts the component when the second one only shallow render it, therefor my guess is your last test, if you check the snapshot, will indeed not have the whole component but instead probably something like that:

<confirmationModal>
  <Styled(div) />
</confirmationModal>