Question

如果这是重复的话，我表示歉意，但是我还没有找到答案。我正在尝试测试呈现react-bootstrap组件的功能组件。冒烟测试可以正常工作，但是尝试测试是否可以渲染正确的孩子仍然很棘手。我一直在关注文档进行浅层渲染，但是即使wrapper.debug（）返回以下内容，我的包装也会返回：ShallowWrapper {}：

<div id="header">
  <Navbar color="faded" tag="nav" expand={false}>
    <NavbarBrand id="logo" href="/" tag="a">
      <img src="logo.png" id="logo-img"  alt="stool-logo" />
      Scores
    </NavbarBrand>
    <div id="header-flex-container">
      <Nav tag="ul" vertical={false} />
    </div>
  </Navbar>
</div>

这是我的组件（仍然是WIP，请忽略未使用的导入）：

import React from "react";
import { Nav, Navbar, NavLink, NavItem, NavbarBrand } from "reactstrap";
import Logo from "../assets/logo.png";

import "../styles/Header.css";

export default function Header() {
  return (
    <div id="header">
      <Navbar color="faded">
        <NavbarBrand id="logo" href="/">
          <img src={Logo} id="logo-img" alt="stool-logo" />
          Scores
        </NavbarBrand>
        <div id="header-flex-container">
          <Nav></Nav>
        </div>
      </Navbar>
    </div>
  );
}

这是我的考验：

import React from 'react';
import { shallow, mount } from 'enzyme';
import { Nav, Navbar, NavLink, NavItem, NavbarBrand } from "reactstrap";

import Header from '../Header';

describe('Header', () => {
  it('renders without crashing', () => {
    shallow(<Header/>)
  });

  it('renders the navbar', () => {
    const wrapper = shallow(<Header />);
    console.log(wrapper);
    console.log(wrapper.debug());
    expect(wrapper.find(Navbar)).to.have.lengthOf(1);
  })
});

我不能完全确定我要去哪里哪里，因为该组件已正确呈现。我也尝试过使用mount，但是每次都会遇到相同的错误：TypeError: Cannot read property 'have' of undefined。

我也尝试过expect(wrapper.hasClass('navbar')).toEqual(true)，但实际使用的是false。我尝试在包装器上使用.dive()，但得到：TypeError: ShallowWrapper::dive() can not be called on Host Components

任何帮助将不胜感激。

Answer 1

看起来您正在使用Jest的chai风格的expect。

您有2个选项，您可以将chai添加到项目中，然后将此导入添加到测试中：

import { expect } from 'chai';

或者，您可以像这样重写测试：

expect(wrapper.find(Navbar).length).toEqual(1);

浅渲染将返回空对象，wrapper.debug（）显示完全渲染的组件

1 个答案: