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

Question

我对使用笑话和酶进行单元测试仍然很陌生，\n我有一个数据测试 ID，我正在尝试使用它进行单元测试。然而，我收到一条错误消息，指出未找到 data-test-id。

\n

我有以下内容

\n

import React from 'react';\nimport Adapter from 'enzyme-adapter-react-16';\nimport { configure, mount, shallow } from 'enzyme';\nimport { shallowToJson } from 'enzyme-to-json';\n\nimport ConfirmationModal from '../src/components/GlobalForm/ConfirmationModal/ConfirmationModal';\n\nconfigure({ adapter: new Adapter() });\n\ndescribe('ConfirmationModal', () => {\n  it('should be defined', () => {\n    expect(ConfirmationModal).toBeDefined();\n  });\n\n  it('should render correctly', () => {\n    const tree = mount(<ConfirmationModal />);\n    expect(shallowToJson(tree)).toMatchSnapshot();\n  });\n\n  it('should have a cancel button', () => {\n    const wrapper = shallow(<ConfirmationModal />);\n    const ConfirmationModalComponent = wrapper.find("[data-test-id='cancel-submit-btn']");\n    expect(ConfirmationModalComponent.length).toBe(1);\n  });\n});\n

\n

甚至我的快照测试也显示我有这个 data-test-id

\n

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

\n

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

\n

\n

ConfirmationModal \xe2\x80\xba 应该有一个取消按钮

\n

expect(received).toBe(expected) // Object.is equality\n\nExpected: 1\nReceived: 0\n

\n

\n

如何？？？？它就在那里...

\n

Answer 1

回答这个问题是因为当我用谷歌搜索数据测试ID和酶时，这个问题首先出现。

试试这个：

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

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