如何用玩笑測驗這個反應組件？-有解無憂

我有這個包裝器組件，我正在嘗試將測驗覆寫率添加到使用 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>
      )
    }
  }

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411802.html

標籤：

上一篇：用async/await測驗異步承諾

下一篇：模擬服務人員，悲傷的路徑測驗失敗