微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决反应测试:测试组件呈现子组件

我有一个反应组件,它呈现一堆子组件。 我正在尝试测试该组件是否确实呈现了这些组件。 我宁愿避免使用酶,所以我尝试使用 @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; ??
  });
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。