Мелкий рендер возвращает пустой объект, wrapper.debug () показывает полностью визуализированный компонент - PullRequest
Новая
       80

Мелкий рендер возвращает пустой объект, wrapper.debug () показывает полностью визуализированный компонент

1 голос
/ 04 ноября 2019

Приношу свои извинения, если это дубликат, но я еще не нашел ответа. Я пытаюсь протестировать функциональный компонент, который отображает компоненты реакции-начальной загрузки. Тест на дым работает нормально, но попытка проверить, правильно ли он показывал правильных детей, была непростой задачей. Я просматриваю документы для поверхностного рендеринга, но моя оболочка возвращает: ShallowWrapper {}, хотя wrapper.debug () возвращает: 

<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

Любая помощь будет очень признательна.

1 Ответ

1 голос
/ 04 ноября 2019

Похоже, вы используете expect от Jest со стилем chai .

У вас есть 2 варианта, вы можете добавить chai в свой проект и добавить этот импорт в свойтесты: 

import { expect } from 'chai';

Или вы можете переписать свой тест следующим образом: 

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