如何使用Jest和Enzyme測驗componentDidMount()中的方法？

我想用單元測驗覆寫下面的代碼：

export class DataTrack extends Component<DataTrackProps> {
componentDidMount() {
    this.setData();
    
    if (this.props.enableDataTrack) {
        this.pushData();
    }
}

private setData() {
    window.globalData = {
        app_platform        : "I"
    }
}

private getData() {
        this.dataTrack= {
            command: "EVENT",
            name: "data",
            data: {
                app_embed_name : "it"
            }
        };

        return this.dataTrack;
}

private pushData() {
    window.analyticsData = window.analyticsData || [];
    window.analyticsData .push(this.getData());
}
}

并開始用componentDidMount下面的測驗覆寫：

it("should run the methods in the componentDidMount", () => {
    const props: DataTrackProps= {
        enableDataTrack: true,
    };

    const setDataOnMount = jest.spyOn(DataTrack.prototype, 'setData'); // spy
    const wrapper = shallow(<DataTrack{...props}  />); // create
    expect(setDataOnMount ).toHaveBeenCalledTimes(1); // test
});

但我收到錯誤： Argument of type '"setData"' is not assignable to parameter of type 'FunctionPropertyNames<Required<DataTrack>>'.

我也不知道如何測驗這些方法setData，getData以及如何pushData使用 Jest/Enzyme。

有人可以幫我弄這個嗎？我怎樣才能涵蓋里面componentDidMount的方法和方法本身？

uj5u.com熱心網友回復：

您可以測驗window.globalData和window.analyticsData是否設定了正確的值。無需為私有方法安裝 spy。

此外，你應該恢復window.globalData和window.analyticsData屬性的初始狀態。避免測驗用例相互影響。

例如

DataTrack.tsx：

import React, { Component } from 'react';

declare global {
  interface Window {
    globalData: any;
    analyticsData: any;
  }
}

interface DataTrackProps {
  enableDataTrack?: boolean;
}
export class DataTrack extends Component<DataTrackProps> {
  dataTrack = {};
  componentDidMount() {
    this.setData();
    if (this.props.enableDataTrack) {
      this.pushData();
    }
  }

  private setData() {
    window.globalData = { app_platform: 'I' };
  }

  private getData() {
    this.dataTrack = {
      command: 'EVENT',
      name: 'data',
      data: {
        app_embed_name: 'it',
      },
    };
    return this.dataTrack;
  }

  private pushData() {
    window.analyticsData = window.analyticsData || [];
    window.analyticsData.push(this.getData());
  }
  render() {
    return <div>data track</div>;
  }
}

DataTract.test.tsx：

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

describe('DataTract', () => {
  afterEach(() => {
    window.globalData = undefined;
    window.analyticsData = undefined;
  });
  test('should push and set data', () => {
    shallow(<DataTrack enableDataTrack />);
    expect(window.globalData).toEqual({ app_platform: 'I' });
    expect(window.analyticsData).toEqual([
      {
        command: 'EVENT',
        name: 'data',
        data: {
          app_embed_name: 'it',
        },
      },
    ]);
  });

  test('should set data', () => {
    shallow(<DataTrack enableDataTrack={false} />);
    expect(window.globalData).toEqual({ app_platform: 'I' });
    expect(window.analyticsData).toBeUndefined();
  });
});

測驗結果：

 PASS  examples/70364599/DataTract.test.tsx (8.509 s)
  DataTract
    ? should push and set data (5 ms)
    ? should set data

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |                   
 DataTract.tsx |     100 |      100 |     100 |     100 |                   
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        9.315 s, estimated 10 s

標籤：反应 单元测试 玩笑 酶

上一篇：如何在Jest/Enzyme中模擬React背景關系？

下一篇：在測驗類中膨脹ViewBinding時出錯：二進制XML檔案第38行：二進制XML檔案第38行：膨脹類<unknown>時出錯