Почему неглубокий рендеринг не работает так, как ожидалось?

Question

Я использую фермент для проверки моего create-react-app компонент, но не работал интуитивно. Я неправильно понимаю, что такое мелкий рендеринг?

import React from "react";
import { Card } from "./Card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

.test.js

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { Card } from "./Card";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find(Card)).to.have.length(3);
});

Я ожидаю, что он должен пройти тест, потому что он имеет 3 Card компоненты в TestUser

Но вывод: TypeError: Невозможно прочитать свойство 'иметь' из неопределенного

Как это работает?

Answer 1

У меня такая же проблема. Это решено с помощью приведенного ниже.

Я создал jest.config.js файл на корневом уровне и добавьте ниже код.

module.export ={
  setupFiles:[ '<rootDir>/src/setUpTests.js']
 }

Я создал setUpTests.js файл и добавьте ниже код.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

И решил мою проблему.

Answer 2

Попробуйте это. Вы должны дать его как строковый литерал. Также для меня expect библиотека, которую вы используете, не та, из которой вы получаете chai и может иметь различный набор вспомогательных методов, что приводит к этой ошибке. К сожалению, у меня нет кода для проверки. Ничего плохого в мелком рендеринге нет вообще.

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { expect } from 'chai';

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).to.have.length(3);
});

Также вам не нужно иметь это заявление здесь, import Card from "./card";

В компоненте TestUser измените оператор импорта следующим образом.

import Card from "./card";

Так что теперь ваш TestUser Компонент должен выглядеть следующим образом.

import React from "react";
import Card from "./card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

Используйте следующую команду для установки chai библиотека.

npm install --save chai

Если вы действительно хотите использовать Jest, измените свое утверждение, как показано ниже.

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find('Card')).toHaveLength(3);
});

Лично мне нравится мокко из-за его свободного API.

Надеюсь это поможет. Удачного кодирования!

Answer 3

В этом случае мелкий рендеринг не будет таким глубоким, как вы хотите div вложенности. http://airbnb.io/enzyme/docs/api/shallow.html

Либо использовать mount или использовать .dive() API, чтобы идти на один уровень дальше. Смотрите пример в документации по ферментам: http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

Answer 4

Используйте ().toEqual() вместо.to.have.length(), так как.to.have не является какой-либо функцией в библиотеке ожидающих шанса. Посетите здесь для получения дополнительной информации.

import React from "react";
import TestUser from "./testuser";
import { shallow } from "enzyme";

it("should render right", () => {
const component = shallow(<TestUser />);

expect(component.find('Card').length).toEqual(3);
});

Answer 5

it("should render right", () => { 
  const component = shallow(<TestUser />);
  const element = component.find('wrapper');
  chai.expect(element.props.children).to.have.length(3); 
});