javascript - How to test if element(tag) rendered with jestenzyme? - Stack Overflow

admin管理员组

文章数量:1290938

I cannot understand how properly test in element is rendered or not. I wrote such a test:

const props = {
  type: 'test_plan',
  renewal: '25.06.2019',
  subscriptionName: 'Test',
};
test('test ponent 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);

    });

This what I have in the console when debug ponent:

<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>

and this is error that I have Cannot read property 'have' of undefined

How properly test if element in ponent rendered or no???

I cannot understand how properly test in element is rendered or not. I wrote such a test:

const props = {
  type: 'test_plan',
  renewal: '25.06.2019',
  subscriptionName: 'Test',
};
test('test ponent 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);

    });

This what I have in the console when debug ponent:

<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>

and this is error that I have Cannot read property 'have' of undefined

How properly test if element in ponent rendered or no???

• javascript
• reactjs
• jestjs
• enzyme

Share Improve this question Follow edited May 26, 2019 at 7:48 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked May 24, 2019 at 8:12 rick1rick1 94644 gold badges1818 silver badges3333 bronze badges 3

• 2 Have you tried wrapper.find('.link').length).toEqual(0) – Rajesh Commented May 24, 2019 at 8:22
• @Rajesh yes that's work. Could you explain why this works and mine not? – rick1 Commented May 24, 2019 at 9:32
• I guess yours is not working because you are trying to do to.have operation on non-existing item – Rikin Commented May 24, 2019 at 20:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

.to.have.lengthOf is an assertion from Chai.

So you can either require expect from Chai and use the Chai assertion:

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 ponent elements render', () => {
  const wrapper = mount(<Component />);
  expect(wrapper.find('.link')).to.have.lengthOf(0);  // Success!
  expect(wrapper.find('.type')).to.have.lengthOf(1);  // Success!
});

...or you can use the .toHaveLength assertion included in Jest:

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

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

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

本文标签： javascriptHow to test if element(tag) rendered with jestenzymeStack Overflow