在 react-test-renderer test 中渲染开玩笑快照之前运行 useEffect 钩子

Question

假设我有以下称为Basic.js的基本组件：

import React, { useState, useEffect } from 'react';
export default () => {
const [items, setItems] = useState([{ name: 'original' }]);
useEffect(() => {
setItems([{ name: 'new1' }, { name: 'new2' }]);
}, []);
return (
<div>{items && items.map((item, i) => <div key={i}>{item.name}</div>)}</div>
);
};

使用反应测试渲染器，我可以编写以下测试：

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Basic from './Basic';
describe('Basic', () => {
test('renders', async done => {
let component = TestRenderer.create(<Basic />);
setImmediate(() => {
expect(component.toJSON()).toMatchSnapshot();
done();
});
});
});

当我运行npm test时，它会生成以下开玩笑快照：

exports[`Basic renders 1`] = `
<div>
<div>
original
</div>
</div>
`;

如何编写测试以便运行useEffect钩子并反映在快照中？因此，生成的快照如下所示：

exports[`BasicClass renders 1`] = `
<div>
<div>
new1
</div>
<div>
new2
</div>
</div>
`;

这是不可能的，有没有我可以用来运行这个钩子的测试库？

Answer 1

使用行为

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Basic from './Basic';
describe('Basic', () => {
test('renders', async () => {
let component;
await act(async () => {
component = TestRenderer.create(<Basic />);
});
expect(component.toJSON()).toMatchSnapshot();
});
});