javascript - 如何用 Jest 测试 rxjs ajax 调用？

Question

我有一个容器组件，我通过 ajax 运算符从 rxjs

获取数据

const data = ajax(someUrl).pipe(map(r => r.response));

在我的 componentDidMount 中有

data.subscribe((data) => {
    this.setState({ data });
});

//测试.js

import React from 'react';
import { mount } from 'enzyme';
import { ajax } from 'rxjs/ajax'
import App from '../src/App';

describe('<App />', () => {
  const wrap = mount(<App />);
  const data = [{ 1: 'a' }];
  const mock = ajax('http://url.com').pipe(map(() => data));
  it('renders', () => {
    console.log(mock.subscribe(x => x));
    expect(wrap.find(App).exists()).toBe(true);
  });
});

如何模拟响应，以便在运行测试时可以将该数据传递给其他组件并检查它们是否呈现？

我发现的所有测试示例都是我没有使用的 redux-Observable 示例。

非常感谢!

Answer 1

首先，您需要了解您应该一次测试一件事。这意味着测试异步方法执行应该与测试呈现正确内容的组件分开。

要测试异步方法，您可以在 Jest 中模拟您的数据和模拟计时器。

https://jestjs.io/docs/en/tutorial-async

https://jestjs.io/docs/en/asynchronous

https://jestjs.io/docs/en/timer-mocks.html

使用 jest.useFakeTimers() 和上面提到的技术。

为了测试组件的正确渲染，使用 jest snapshots 和 e2e 测试(可以用 ex. TestCafe 完成)

要连接这些方法，您需要以一种允许您的方式设计您的应用:

1. 您在组件中调用的 API 应该在组件外部并从该外部源调用(不同的文件、不同的类，无论您如何设计)，因此您可以在测试中替换它。

2. 整个 API 应该是模块化的，因此您可以使用一个模块并对其进行测试，而无需针对这种情况初始化整个 API。

3. 如果您以这种方式设计您的应用，您可以使用模拟数据初始化部分 API，然后在测试中渲染您的组件，因为它会调用模拟 API，您可以检查它是否呈现您期望的内容到。