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

mvn dependency:tree是assertion from Chai。

因此您可以从.to.have.lengthOf中请求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

如何测试元素（标签）是否带有笑话/酶？

1 个答案: