react-test-renderer的create()与@test-library/react的render()
react-test-renderer的create()与@test-library/react的render()
提问于 2019-11-01 11:46:18
我是个新手，对所有的测试库都很困惑。我让我的测试代码正常工作，但为了使用它的toMatchSnapshot()，必须从react- test -renderer调用create()，并且为了使用它的断言，必须从@testing-library/react调用render()，这似乎是多余的。
import {render} from '@testing-library/react';
import {act, create} from 'react-test-renderer';
it('renders a login screen', () => {
let mockInitialState: AppState = {
auth: initialAuthState
};
let component = <Root initialState={mockInitialState}/>;
let tree = null;
act(() => {
tree = create(component);
});
expect(tree).toMatchSnapshot();
const {getByLabelText, getByText} = render(component);
expect(getByLabelText(/Email Address.*/));
expect(getByLabelText(/Password*/));
expect(getByText('Sign in'));
});作为一个新手，我很难理解所有这些React库之间的区别。但我在想一定有更简单的方法。
我如何简化我的测试代码，使我只需要调用一个呈现组件的东西，这样我就可以进行快照测试和更具体的断言？
回答 2
Stack Overflow用户
发布于 2019-11-02 03:33:41
我从Codementor.io的齐亚德·萨博那里得到了答案：
create()允许您针对虚拟DOM进行测试(即"React DOM")render()来自react测试库并呈现您的树，但也允许您拥有所有的get*()断言。它允许您针对DOM进行测试。
下面是如何简化代码的方法：
it('renders a login screen', () => {
let mockInitialState: AppState = {
auth: initialAuthState
};
const {container, getByLabelText, getByText} = render(<Root initialState={mockInitialState}/>);
expect(container.firstChild).toMatchSnapshot();
expect(getByLabelText(/Email Address.*/));
expect(getByLabelText(/Password*/));
expect(getByText('Sign in'));
});Ziad让我知道没有理由使用act()，它只是为了解决create()中的一个bug。既然代码没有使用create()，就不需要使用act()。
因此，我的快照现在包含class而不是className，因为class是实际HTML DOM中的内容，而className是React的“虚拟DOM”中的等价物。
(之前)基于React的虚拟DOM的create()快照：
className="MuiBox-root MuiBox-root-256"基于HTML DOM的render()快照：
class="MuiBox-root MuiBox-root-256"Stack Overflow用户
发布于 2021-07-27 13:43:13
如果你使用的是Create React App，那么我会坚持使用react-testing library，因为它是自带的。
除了容器，您还可以使用asFragment进行快照测试。
const {container} = render(<Root initialState={mockInitialState}/>);
expect(asFragment).toMatchSnapshot();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58653872
复制相关文章
相似问题
腾讯云开发者
