Question

我正在测试，但是所有这些测试始终失败并且不知道如何正确执行

测试

const mockProps = {
    object: {
        objectId: '12',
    }
}
test('should call reloadObjectDetails when objectId has changed', () => {
        mockProps.fetchObjectDetails.mockClear()
        const objectId = '123'
        instance.componentWillReceiveProps({ object: objectId })
        expect(mockProps.fetchObjectDetails).toHaveBeenCalledWith(objectId)
    })

组件

componentWillReceiveProps (nextProps) {
    const { object: newObject } = nextProps
    const { object } = this.props
    if (object.objectId !== newObject.objectId) {
        this.reloadObjectDetails(newObject.objectId)
}
reloadObjectDetails (objectId) {
        const { fetchObjectDetails } = this.props
        if (objectId && objectId !== '-1') {
            fetchObjectDetails(objectId)
        }
    }

问题是如何放置新对象nextProps以便输入componentWillReceiveProps的if

Answer 1

这是基于以下解决方案：

"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0",
"react": "^16.9.0",

您可以使用enzyme的{{3}}方法来设置组件的下一个道具。

index.tsx：

import React, { Component } from 'react';

interface ISomeComponentProps {
  object: {
    objectId: string;
  };
}

interface ISomeComponentDispatchProps {
  fetchObjectDetails(objectId: string): void;
}

type Props = ISomeComponentProps & ISomeComponentDispatchProps;

export class SomeCompoennt extends Component<Props> {
  constructor(props: Props) {
    super(props);
  }

  public componentWillReceiveProps(nextProps: Readonly<Props>) {
    const { object: newObject } = nextProps;
    const { object } = this.props;
    if (object.objectId !== newObject.objectId) {
      this.reloadObjectDetails(newObject.objectId);
    }
  }

  public render() {
    return <div>{this.props.object.objectId}</div>;
  }

  private reloadObjectDetails(objectId: string) {
    const { fetchObjectDetails } = this.props;
    if (objectId && objectId !== '-1') {
      fetchObjectDetails(objectId);
    }
  }
}

index.spec.tsx：

import React from 'react';
import { SomeCompoennt } from './';
import { shallow, ShallowWrapper } from 'enzyme';

describe('SomeCompoennt', () => {
  const mockProps = {
    object: {
      objectId: '12'
    },
    fetchObjectDetails: jest.fn()
  };

  let wrapper: ShallowWrapper;
  beforeEach(() => {
    wrapper = shallow(<SomeCompoennt {...mockProps}></SomeCompoennt>);
    mockProps.fetchObjectDetails.mockClear();
  });

  test('should shallow render correctly', () => {
    expect(wrapper).toMatchSnapshot();
  });

  test('should call reloadObjectDetails when objectId has changed', () => {
    const objectId = '123';
    const nextProps = { object: { objectId } };
    const spy = jest.spyOn(SomeCompoennt.prototype, 'componentWillReceiveProps');
    const reloadObjectDetailsSpy = jest.spyOn(SomeCompoennt.prototype as any, 'reloadObjectDetails');
    wrapper.setProps(nextProps);
    expect(reloadObjectDetailsSpy).toBeCalledWith(objectId);
    expect(spy).toBeCalledTimes(1);
    expect(mockProps.fetchObjectDetails).toBeCalledWith(objectId);
    expect(wrapper).toMatchSnapshot();
  });
});

带有覆盖率报告的单元测试结果：

 PASS  src/stackoverflow/57674824/index.spec.tsx
  SomeCompoennt
    ✓ should shallow render correctly (8ms)
    ✓ should call reloadObjectDetails when objectId has changed (4ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |       75 |      100 |      100 |                   |
 index.tsx |      100 |       75 |      100 |      100 |             23,34 |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        3.12s, estimated 4s

index.spec.tsx.snap：

// Jest Snapshot v1, 

exports[`SomeCompoennt should call reloadObjectDetails when objectId has changed 1`] = `
<div>
  123
</div>
`;

exports[`SomeCompoennt should shallow render correctly 1`] = `
<div>
  12
</div>
`;

这是完整的演示：setProps(nextProps)

在componentWillReceiveProps中更改Nextprops

1 个答案: