如何将酶（浅）转换为反应测试库？

Question

如何将我的这部分测试转换为 React 测试库，这样我就不再使用 shallow 了？

const renderComponent = (jsx) => {
  const component = shallow(jsx);
  const title = component.find('.tile-bottom__title');
  const content = component.find('.tile-bottom__text');
  return {
    component,
    title,
    content,
  };
};

Answer 1

因为对于 react-testing-library，你可以从屏幕上读取 DOM 节点，你可以将函数更新为

const renderComponent = (jsx) => {
  const { container, getByTestId }  = render(jsx);
  const title = getByTestId('tile-bottom__title'); // not class but testId
  const content = getByTestId('tile-bottom__text'); // // not class but testId
  return {
    // component, // not needed to return component as you can use `screen` for further assertions
    title,
    content,
  };
};