Reactjs Cypress 组件测试不渲染react 组件(但它的内容)

发布于03月07日

我正在对一个简单的Reaction组件进行组件测试，我想呈现该组件，然后对其进行一些测试. 问题是，cy.get似乎没有根据数据测试找到它.我用一个简单的div ant对其进行了测试，可以很好地找到div.我还注意到，在判断松树流道中的DOM时，没有呈现组件，但呈现了它的内容.基本上没有<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

  });

我怎么才能拿到 cypress 的<MockComponent>，这样我就可以对它进行测试了？

推荐答案

您不能将data-id属性直接添加到Reaction组件并使其出现在DOM内容上.

设置为MockComponent的所有属性(数据或其他属性)都将作为props 传递给组件.这是react 的标准.

因此，如果您判断MockComponent内部的props，它将具有一个名为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

MockComponent返回值中的<div>是呈现给DOM的"外层"元素，因此需要data-id.

或者你可以隐含地做这件事.由于someData是您的组件API的一部分，您可以将其拆分出来，并假定其余的将用作属性(而不需要实际知道它们是什么).

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

另一种方法是将子元素加到MockComponent，这必须是一个实数元素.

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

const MockComponent = (props) => {
  const {someData} = props

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

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

...

cy.mount(
  <MockComponent {...someData} >
    <span data-testid='mock-component-child' ></span>
  </MockComponent>
);

cy.get("[data-testid='mock-component-child']")   // passes
  .parent()                              // outer element of MockComponent