Question

我是React的新手，对所有测试库感到困惑。我的测试代码可以正常工作，但是似乎不得不从react-test-renderer调用create()才能使用其toMatchSnapshot()，而不得不从@ testing-library调用render() / react以便使用其声明，例如getByLabelText()。

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库之间的区别。但我认为必须有一种更简单的方法。

如何简化测试代码，只需要调用渲染组件的一件事，即可进行快照测试和更具体的断言？

Answer 1

如果您使用的是 Create React App，那么我会坚持使用 react-testing-library，因为它是随附的。

除了容器，您还可以使用 asFragment 进行快照测试。

 const {container} = render(<Root initialState={mockInitialState}/>);
 expect(asFragment).toMatchSnapshot();

Answer 2

我从Codementor.io的Ziad Saab得到了答案：

create()允许您针对虚拟DOM（即“反应DOM”）进行测试
render()来自反应测试库，可以渲染树，但也可以使您拥有所有的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()中的错误。现在，该代码未使用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"

react-test-renderer的create（）与@ testing-library / react的render（）

2 个答案: