我的数据测试 ID 在那里，但我的测试找不到它反应酶开玩笑单元测试

Question

我对使用 jest 和 enzyme 进行单元测试还是陌生的，我有一个 data-test-id，我正在尝试使用它进行单元测试。然而，我收到一条错误消息，指出未找到数据测试 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);
  });
});

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

但是我的测试结果有错误：

ConfirmationModal › should have a cancel button
expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

怎么样？？？？它就在那里...

Answer 1

不确定您的 ConfirmationModal 组件是什么样子，但我的猜测是它包裹在某些样式中，正如您的快照所建议的那样：<Styled(div)>

在你的快照测试和你试图找到的那个之间 data-test-id，第一个安装组件，而第二个只浅渲染它，因此我猜是你的最后一个测试，如果你检查快照，确实不会有整个组件，而是可能是这样的：

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

Answer 2

回答是因为当我用 google 搜索 data-testid 和 enzyme 时这个问题最先出现。

试试这个：

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

本文blog post 详细介绍了反应酶快照测试。我添加了上面的示例，以防博客 post 被删除。

我的数据测试 ID 在那里，但我的测试找不到它反应酶开玩笑单元测试

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

unit-testing

reactjs

jestjs

enzyme