在 componentDidMount 解决承诺后拍摄快照

Question

一个 componentDidMount 调用一个调用 api
api 是具有导出 fetchVersionsRequest 功能的模块
fetchVersionsRequest 使用 Promise
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>)}
  }
}

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

我的测试主页组件

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.fn 模拟来自 API 的数据。您可以通过直接使用 wrapper.setProps:

设置道具来测试您的组件

const wrapper = shallow(<Home {...this.minProps} />);
wrapper.setProps({
  versionStore: {
    all: versions
  }
});
expect(toJson(wrapper)).toMatchSnapshot();

Answer 2

只是为了向您展示如何在玩笑中使用 promises。您必须 return 测试中的承诺让笑话知道它必须等待它。

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

在 componentDidMount 解决承诺后拍摄快照

Take Snapshot after componentDidMount resolve a promise

reactjs

jestjs

enzyme

mobx

mobx-react

主页组件