如何对获取完成后渲染的 React 组件进行单元测试?

Question

我是 Jest/React 初学者。开玩笑it我需要等到所有承诺都执行完毕后才能实际检查。

我的代码类似于这样：

export class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { /* Some state */ };
}
componentDidMount() {
fetch(some_url)
.then(response => response.json())
.then(json => this.setState(some_state);
}
render() {
// Do some rendering based on the state
}
}

挂载组件时，render()运行两次：一次在构造函数运行后，一次在fetch()(componentDidMount()(完成并且链接的 promise 完成执行之后(。

我的测试代码类似于这样：

describe('MyComponent', () => {
fetchMock.get('*', some_response);
it('renders something', () => {
let wrapper = mount(<MyComponent />);
expect(wrapper.find(...)).to.have.something();
};
}

无论我从it返回什么，它都会在第一次执行之后运行render()但在第二次执行之前运行。例如，如果我返回fetchMock.flush().then(() => expect(...))，则返回的承诺在第二次调用render()之前执行(我相信我能理解为什么(。

如何等到第二次调用render()后再运行expect()？

Answer 1

我会分开关注点，主要是因为它更容易维护和测试。而不是在组件内部声明获取，我会在其他地方进行，例如在 redux 操作中(如果使用 redux(。

然后单独测试获取和组件，毕竟这是单元测试。

对于异步测试，可以在测试中使用done参数。例如：

describe('Some tests', () => {
fetchMock.get('*', some_response);
it('should fetch data', (done) => { // <---- Param
fetchSomething({ some: 'Params' })
.then(result => {
expect(result).toBe({ whatever: 'here' });
done(); // <--- When you are done
});
});
})

您可以通过在 props 中发送加载的数据来测试您的组件。

describe('MyComponent', () => {
it('renders something', () => {
const mockResponse = { some: 'data' };
let wrapper = mount(<MyComponent data={mockResponse}/>);
expect(wrapper.find(...)).to.have.something();
});
});

在测试方面，您需要保持简单，如果您的组件难以测试，那么您的设计;)就有问题

Answer 2

我在这方面取得了一些成功，因为它不需要包装或修改组件。 但是，它假设组件中只有一个fetch()，但如果需要，可以轻松修改它。

// testhelper.js
class testhelper
{
static async waitUntil(fnWait) {
return new Promise((resolve, reject) => {
let count = 0;
function check() {
if (++count > 20) {
reject(new TypeError('Timeout waiting for fetch call to begin'));
return;
}
if (fnWait()) resolve();
setTimeout(check, 10);
}
check();
});
}
static async waitForFetch(fetchMock)
{
// Wait until at least one fetch() call has started.
await this.waitUntil(() => fetchMock.called());
// Wait until active fetch calls have completed.
await fetchMock.flush();
}
}
export default testhelper;

然后，您可以在断言之前使用它：

import testhelper from './testhelper.js';
it('example', async () => {
const wrapper = mount(<MyComponent/>);
// Wait until all fetch() calls have completed
await testhelper.waitForFetch(fetchMock);
expect(wrapper.html()).toMatchSnapshot();
});

Answer 3

我找到了一种方法来做我最初要求的事情。我(还(没有意见这是否是好的策略(事实上，我不得不在之后立即重构组件，所以这个问题不再与我正在做的事情相关(。无论如何，这是测试代码(解释如下(：

import React from 'react';
import { mount } from 'enzyme';
import { MyComponent } from 'wherever';
import fetchMock from 'fetch-mock';
let _resolveHoldingPromise = false;
class WrappedMyComponent extends MyComponent {
render() {
const result = super.render();
_resolveHoldingPromise && _resolveHoldingPromise();
_resolveHoldingPromise = false;
return result;
}
static waitUntilRender() {
// Create a promise that can be manually resolved
let _holdingPromise = new Promise(resolve =>
_resolveHoldingPromise = resolve);
// Return a promise that will resolve when the component renders
return Promise.all([_holdingPromise]);
}
}
describe('MyComponent', () => {
fetchMock.get('*', 'some_response');
const onError = () => { throw 'Internal test error'; };
it('renders MyComponent appropriately', done => {
let component = <WrappedMyComponent />;
let wrapper = mount(component);
WrappedMyComponent.waitUntilRender().then(
() => {
expect(wrapper.find('whatever')).toBe('whatever');
done();
},
onError);
});
});

主要思想是，在测试代码中，我对组件进行子类化(如果这是 Python，我可能会对它进行猴子修补，在这种情况下或多或少以相同的方式工作(，以便它的render()方法发送它执行的信号。发送信号的方法是手动解析承诺。创建承诺时，它会创建两个函数：solve和拒绝，调用时会终止承诺。让承诺外部的代码解析承诺的方法是让承诺在外部变量中存储对其解析函数的引用。

感谢获取模拟作者Rhys Evans，他亲切地向我解释了手动解析承诺技巧。