如何用玩笑测试这个反应组件？答案

【问题标题】：How to test this react component with jest?如何用玩笑测试这个反应组件？
【发布时间】：2022-01-14 11:42:55
【问题描述】：

我有这个包装器组件，我正在尝试使用 jest 添加测试覆盖率。

我不知道从哪里开始，它实际上并没有在我能看到的任何地方使用，但我仍然需要添加覆盖范围。

我只是在考虑一个普通的快照测试，但我不确定这是否是正确的方法。任何帮助或想法将不胜感激。

import React, { Fragment } from 'react'

export const layoutWrap = <P extends object> (
  Wrapper: React.ComponentType<P>
) =>
  class ResponsiveWrap extends React.Component<P> {
    render() {
      return (
        <Fragment>
          <Wrapper {...this.props} />
        </Fragment>
      )
    }
  }

【问题讨论】：

标签： reactjs typescript testing jestjs enzyme

【解决方案1】：

这个 HOC 不做任何事情，只是用 Fragment 包裹起来，并将所有的 props 传递给 Wrapper 组件。

您可以使用普通快照测试对其进行测试，也可以自行检查包装器是否存在及其道具。

例如

index.tsx:

import React, { Fragment } from 'react';

export const layoutWrap = <P extends object>(Wrapper: React.ComponentType<P>) =>
  class ResponsiveWrap extends React.Component<P> {
    render() {
      return (
        <Fragment>
          <Wrapper {...this.props} />
        </Fragment>
      );
    }
  };

index.test.tsx:

import { shallow } from 'enzyme';
import React from 'react';
import { layoutWrap } from './';

function Test(props: { span: number }) {
  return <div>span: {props.span}</div>;
}

describe('70703018', () => {
  test('should pass 1', () => {
    const LayoutWrapTest = layoutWrap(Test);
    const wrapper = shallow(<LayoutWrapTest span={8} />);
    expect(wrapper.find(Test).exists()).toBeTruthy();
    expect(wrapper.find(Test).props()).toEqual({ span: 8 });
  });

  test('should pass 2', () => {
    const LayoutWrapTest = layoutWrap(Test);
    const wrapper = shallow(<LayoutWrapTest span={8} />);
    expect(wrapper).toMatchInlineSnapshot(`
      <Fragment>
        <Test
          span={8}
        />
      </Fragment>
    `);
  });
});

测试结果：

 PASS  stackoverflow/70703018/index.test.tsx (9.905 s)
  70703018
    ✓ should pass 1 (22 ms)
    ✓ should pass 2 (13 ms)

 › 1 snapshot written.
-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   1 written, 1 total
Time:        11.045 s

【讨论】：