如何用 jest 测试这个 react 组件？

Question

我有这个包装器组件，我正在尝试使用 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>
      )
    }
  }

Answer 1

这个 HOC 什么都不做，只是用 Fragment 包装并将所有属性传递给 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  Whosebug/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

如何用 jest 测试这个 react 组件？

How to test this react component with jest?

reactjs

typescript

testing

jestjs

enzyme