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，您可以检查它是否呈现您期望的内容到。