reactjs - 在 componentDidMount 解决 promise 后拍摄快照

Question

• componentDidMount 调用一个调用 API 的存储
• api是一个具有导出fetchVersionsRequest功能的模块
• fetchVersionsRequest 使用 Promise 调用 api 端点
• all 在 promise 解决后由商店更新
• Mobx，通过@observer将再次调用组件渲染，因为all已更新

Please, check the comments

主页组件

@inject('versionStore') @observer
export default class extends Component {
  componentDidMount() {
    const { fetch } = this.props.versionStore;
    fetch(); // Will call api.fetchVersionsRequest
  }

  render() {
    // all is an array updated after call api.fetchVersionsRequest resolved
    const { all } = this.props.versionStore; 
    // ...
    return {all.map(it => <p>{it.name}</p>)}
  }
}

如何测试组件是否正确渲染？
我想使用快照功能，给一个api返回的列表，组件应该是快照

我的测试主页组件

it('renders versions', function() {
  const versions = [
    { id: 1, name: 'version1' },
    { id: 2, name: 'version2' },
  ];

  api.fetchVersionsRequest = jest.fn(() => {
    return Promise.resolve(versions);
  });

  const wrapper = shallow(<Home {...this.minProps} />);
  expect(toJson(wrapper)).toMatchSnapshot(); // PROBLEM Snapshot does not contain any p element
}

Answer 1

只是为了向您展示如何对于Jest的方式处理 Promise。您必须从测试返回 promise ，让 jest 知道它必须等待。

it('renders versions', function() {
  const versions = [
    { id: 1, name: 'version1' },
    { id: 2, name: 'version2' },
  ];
  const p = Promise.resolve(versions);
  api.fetchVersionsRequest = jest.fn(() => {
    return p
  });

  const wrapper = shallow(<Home {...this.minProps} />);
  return p.then(()=>{
    expect(toJson(wrapper)).toMatchSnapshot(); 
  })

}

或

it('renders versions', async function() {
  const versions = [
    { id: 1, name: 'version1' },
    { id: 2, name: 'version2' },
  ];
  const p = Promise.resolve(versions);
  api.fetchVersionsRequest = jest.fn(() => {
    return p
  });

  const wrapper = shallow(<Home {...this.minProps} />);
  a
  expect(toJson(wrapper)).toMatchSnapshot(); 

}

已说明here在文档中