Как проверить, отображается ли элемент (тег) с помощью jest / энзима?

Question

Я не могу понять, как правильно тестируется элемент или нет. Я написал такой тест:

const props = {
  type: 'test_plan',
  renewal: '25.06.2019',
  subscriptionName: 'Test',
};
test('test component elements render', () => {

     const wrapper = mount(<Component {...props} />);
     console.log(wrapper.debug())
     expect(wrapper.find('.link')).to.have.lengthOf(0);
     expect(wrapper.find('type')).to.have.lengthOf(1);

    });

Это то, что у меня в консоли при отладке компонента:

<div className="wrapper">
        <div className="mobile">
          <h3>
            Test
          </h3>
        </div>
        <div className="inner">
          <h3>
            Test
          </h3>
          <div className="type">
            <h4>
              Test Type 1
            </h4>
            <span>

              25.06.2019
            </span>
          </div>
        </div>
      </div>

и это ошибка, которую я имею Cannot read property 'have' of undefined

Как правильно проверить, отображается ли элемент в компоненте или нет ???

Answer 1

.to.have.lengthOf - это утверждение из Chai.

Так что вы можете либо потребовать expect из Chai и использовать утверждение Chai:

import * as React from 'react';
import { mount } from 'enzyme';

const expect = require('chai').expect;  // <= use expect from Chai

const Component = () => (<div><div className="type"></div></div>);

test('test component elements render', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find('.link')).to.have.lengthOf(0);  // Success!
  expect(wrapper.find('.type')).to.have.lengthOf(1);  // Success!
});

... или вы можете использовать утверждение .toHaveLength, включенное в Jest:

import * as React from 'react';
import { mount } from 'enzyme';

const Component = () => (<div><div className="type"></div></div>);

test('test component elements render', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find('.link')).toHaveLength(0);  // Success!
  expect(wrapper.find('.type')).toHaveLength(1);  // Success!
});