如何在 React 组件测试中使用 data-testid 属性？

Question

我正在对一个简单的反应组件进行组件测试，我想渲染该组件，然后对其进行一些测试。

问题是似乎cy.get()没有根据属性找到组件data-testid。

我用简单的方法测试了一下div，div可以发现很好。

我还注意到在检查DOMcypress runner 时，组件没有被渲染，但它的内容被渲染。基本上没有<MockComponent>

  it.only("renders and finds Component", () => {
    cy.mount(
      <ApolloProvider client={client}>
        <MockComponent data-testid='mock-component' {...someData} />
        <div data-testid='my-div'></div>
      </ApolloProvider>
    );

    cy.get("[data-testid='my-div']").should('exist'); //this works
    cy.get("[data-testid='mock-component']").should('exist'); //this doesn't

  });

我怎样才能获得<MockComponent>cypress ，以便我可以对其进行测试？

Answer 1

您无法将 data-id 属性直接添加到 React 组件并使其出现在 DOM 内容上。

您添加的所有属性（数据或其他）MockComponent都会作为 props 传递给您的组件。这是 React 的标准。

因此，如果您检查propsinside MockComponent，它将有一个名为 、data-testid值为 的属性mock-component。

您必须将其转换为MockComponent其中一个渲染元素上的属性。

请注意，它MockComponent永远不会出现在 DOM 中，只是呈现子级。

例如，明确地：

const MockComponent = (props) => {
  return (
    <div data-testid={props["data-testid"]}>    
      <span>this is mock component</span>
    </div>
  )
}

...

cy.get("[data-testid='mock-component']")   // passes

内部<div>MockComponent 的返回值是呈现给 DOM 的“外部”元素，因此这就是您需要 data-id 的地方。

或者您可以隐式地执行此操作。由于someData它是组件 API 的一部分，因此您可以将其拆分并假设其余部分将用作属性（实际上不知道它们是什么）。

const MockComponent = (props) => {
  return (
    <div data-testid={props["data-testid"]}>    
      <span>this is mock component</span>
    </div>
  )
}

...

cy.get("[data-testid='mock-component']")   // passes

另一种方法是向 中添加一个子元素MockComponent，它必须是一个真实元素。

所有子元素都作为 传递props.children，并且您必须在返回值中呈现它们。

const MockComponent = (props) => {
  const {someData, ...rest} = props;

  const [data, setData] = useState(someData);

  return (
    <div {...rest}>
      <span>this is mock component</span>
    </div>
  )
}

...

cy.get("[data-testid='mock-component']")   // passes