reactjs - 我的数据测试 ID 在那里，但我的测试找不到它 react enzyme Jest 单元测试

Question

我对使用 Jest 和 enzyme 进行单元测试仍然不熟悉，
我有一个数据测试 ID，我正在尝试使用它进行单元测试。但是，我收到一条错误消息，指出未找到 data-test-id。
我有以下

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);
  });
});

甚至我的快照测试也显示我有这个数据测试 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>
`;

但我的测试结果出现错误:

ConfirmationModal › should have a cancel button

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

Expected: 1
Received: 0

如何？？？？就在那里……

Answer 1

回答是因为当我在谷歌上搜索 data-testid 和 enzyme 时，这个问题首先出现。
试试这个:

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

此 blog post详细介绍了 react enzyme 快照测试。我已经添加了上面的例子，以防博客文章被删除。