Question

我有一个反应组件，它呈现一堆子组件。我正在尝试测试该组件是否确实呈现了这些组件。我宁愿避免使用酶，所以我尝试使用 @testing-library/react 和 react-test-renderer。

我似乎可以通过 findByType 获取子组件，但是我在库中找不到任何断言来检查元素是否已呈现。我试过检查无效性，但是当组件不存在时这不起作用。

我不想使用react-test-renderer的getByRole，因为那会测试子组件的根元素的角色，我认为这属于子组件的测试。我只是想测试子组件是否实例化。

我是否以错误的方式接近这个？测试父母是否正确渲染其孩子不是一般做法吗？我应该改用快照测试吗？

App.tsx

...
return (
  <Navbar className={styles.navbar} />
  <Header />
  <Footer />   
);

App.test.ts

import { render, screen } from '@testing-library/react';
import Footer from './footer/Footer';
import Navbar from './navbar/Navbar';
describe('App', () => {
  let component;
  let instance;

  beforeEach(() => {
    // render(<App />); // Unsure if I should use react-testing-lib or react-test-renderer
    component = renderer.create(<App />);
    instance = component.root;
  });

  it('should render a navbar', () => {
    expect(instance.findByType(Navbar)).not.toBeNull;  ??
    expect(instance.findByType('section')).toBeNull; // Just playing with the null assertion here, this causes the test to fail
  });

  it('should define the footer', () => {
    expect(instance.findByType(Footer)).not.toBeNull; ??
  });
});

反应测试：测试组件呈现子组件

0 个答案: