javascript - 特定组件中的 'expecting to render' 测试代码覆盖率较低

Question

我正在使用 react-test-render 在我的应用程序的特定组件上编写一个简单的测试，并且测试期望组件呈现。

我已经尝试在测试文件上实现组件所需的属性，但仍然没有结果，组件的测试覆盖率仍然很低。测试通过，我认为问题出在功能上。

   class Component extends React.PureComponent { 
        constructor(props, context) {
            super(props, context);

            this.function1 = this.function1.bind(this);
            this.function2 = this.function2.bind(this);
        }

        handleRef(element) {
            const { var1 } = this.props;

            this.iframe = element;
            if (var1) {
                var1(element);
            }
        }

        function2() {
            const {
                var2,
                var3,
                var4,
            } = this.props;

           if (!var2(this.iframe) && var3) {
           var3();
           localytics.tagEvent({ pageName: 'string' });
           return;
       }

       if (var3) {
            var3();
            performanceLog('The iframe has loaded at: ');
            localytics.tagEvent({ pageName: 'homepage:ok' });
       }
   }

       render() {

        //render html

     }
 }

AppFrame.propTypes = {
   //proptypes 
};

 AppFrame.defaultProps = {
      //default props
 };

 export default withStyles(styles)(AppFrame);

测试代码:

import React from 'react';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
import renderer from 'react-test-renderer';

import AppFrame from '../index';

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

describe('<AppFrame />', () => {
   it('Expect to render', () => {
     const renderedComponent = renderer.create(
        <AppFrame var1="test" var2={() => {}} />
     ).toJSON();

expect(renderedComponent).toMatchSnapshot();
});
});

测试覆盖率截图:

Answer 1

快照测试仅涵盖渲染的项目，通常不考虑类中的其他方法。您可以调用instance方法，并检查是否 stubbed Prop 被称为，即:

这是一个 enzyme's shallow renderer 的例子:

import { shallow } from 'enzyme';

describe('<AppFrame />', () => {
  const onErrorStub = jest.fn();

  it('Expect to render', () => {
    const renderedComponent = shallow(
       <AppFrame
          src="test"
          onLoad={() => {}}
          onError={onErrorStub}
          isLoadedSuccessfully={() => false} />
    );

    renderedComponent.instance().handleOnLoad();
    expect(onErrorStub).toBeCalled();
    });
});

您可能还想测试 stub 是否被调用 with specific arguments .

此外，检查项目中的 coverage 文件夹 - 应该有关于(未)涵盖内容的详细报告。