Reactjs 如何使用Jest测试异步组件？

有谁能告诉我，当安装一个调用

componendddimount（）

的组件时，如何开玩笑地等待一个模拟的承诺来解决

然后我的测试文件：

import { API } from 'api';
import { API as mockAPI } from '__mocks/api';

API.get = jest.fn().mockImplementation(mockAPI.get);

describe('Something Component', () => {
  it('renders after data loads', () => {
    const wrapper = mount(<Something />);
    expect(mountToJson(wrapper)).toMatchSnapshot();
    // here is where I dont know how to wait to do the expect until the mock promise does its nextTick and resolves
  });
});

从'API'导入{API}；
从“_mocks/API”导入{API as mockAPI}”；
API.get=jest.fn（）.mockImplementation（mockAPI.get）；
描述（'Something Component'，（）=>{
它（'加载数据后渲染'，（）=>{
const wrapper=mount（）；
expect（mountToJson（wrapper））.toMatchSnapshot（）；
//在这里，我不知道如何等待，直到模拟承诺完成下一步并解决问题
});
});

问题是，

expect（mountToJson（wrapper））

正在返回

null

，因为

的模拟api调用和生命周期方法尚未完成。

Jest有模拟要伪造，在您的情况下使用它，我想您可以用以下方式更改代码：

import { API } from 'api';
import { API as mockAPI } from '__mocks/api';

API.get = jest.fn().mockImplementation(mockAPI.get);

jest.useFakeTimers(); // this statement makes sure you use fake timers

describe('Something Component', () => {
  it('renders after data loads', () => {
    const wrapper = mount(<Something />);

    // skip forward to a certain time
    jest.runTimersToTime(1);

    expect(mountToJson(wrapper)).toMatchSnapshot();
  });
});

从'API'导入{API}；
从“_mocks/API”导入{API as mockAPI}”；
API.get=jest.fn（）.mockImplementation（mockAPI.get）；
jest.useFakeTimers（）；//此声明确保您使用假计时器
描述（'Something Component'，（）=>{
它（'加载数据后渲染'，（）=>{
const wrapper=mount（）；
//跳到某个时间
jest.RuntimerToTime（1）；
expect（mountToJson（wrapper））.toMatchSnapshot（）；
});
});

---

除了

jest.runTimersToTime（）

之外，您还可以使用

jest.runAllTimers（）

如果它与jasmine一起运行，您可以使用

jasmine.clock（）.install（）进行“时间旅行”；jasmine.clock（）.tick（1）

这应该足以让你的下一个tick完成。测试后，不要忘记运行

jasmin.clock（）.uninstall（）

，否则时钟将静止不动。不幸的是，没有使用jasmine，使用jest expect libraryJest似乎有类似的描述，因此这看起来非常有希望，但不幸的是，正在编写的快照仍然是一个空的，其中没有UI（…），我尝试了

jest.runTimersToTime（1）

和

jest.runAllTimers（）

你能检查一下你的api函数是否被调用了吗？您是否尝试等待1000毫秒？有趣的是，我在

render（）

函数的顶部添加了

console.error（this.state）

，并且状态正在更新，只是比较快照的

expect

语句似乎运行得太快了？也许我需要

jest.runTimersToTime（1）。然后（（）=>//expect snapshot）

？如果这是一个承诺，那么您也可以从

it

返回它，前提是jest安装程序也支持返回承诺：）好的，我确实

返回了新的承诺（（解析，拒绝）=>进程。nextTick（（）=>解析（expect）（mountToJson（包装器））.toMatchSnapshot（））

成功了！

import { API } from 'api';
import { API as mockAPI } from '__mocks/api';

API.get = jest.fn().mockImplementation(mockAPI.get);

describe('Something Component', () => {
  it('renders after data loads', () => {
    const wrapper = mount(<Something />);
    expect(mountToJson(wrapper)).toMatchSnapshot();
    // here is where I dont know how to wait to do the expect until the mock promise does its nextTick and resolves
  });
});

import { API } from 'api';
import { API as mockAPI } from '__mocks/api';

API.get = jest.fn().mockImplementation(mockAPI.get);

jest.useFakeTimers(); // this statement makes sure you use fake timers

describe('Something Component', () => {
  it('renders after data loads', () => {
    const wrapper = mount(<Something />);

    // skip forward to a certain time
    jest.runTimersToTime(1);

    expect(mountToJson(wrapper)).toMatchSnapshot();
  });
});