create-test-renderer's create () против @ testing-library /act's render () - PullRequest
Новая
       34

create-test-renderer's create () против @ testing-library /act's render ()

0 голосов
/ 01 ноября 2019

Я новичок в React и запутался во всех библиотеках тестирования. Я заставил свой тестовый код работать, но он кажется излишним, чтобы использовать create() из реагирующего-тест-рендерера, чтобы использовать его toMatchSnapshot(), и должен вызывать render() из @ testing-library / реагировать, чтобы использоватьтакие утверждения, как 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. Но я думаю, что должен быть более простой способ.

Как я могу упростить свой тестовый код, чтобы мне нужно было вызывать только одну вещь, которая отображает компонент, чтобы я мог проводить тестирование снимков и более конкретные утверждения?

1 Ответ

0 голосов
/ 01 ноября 2019

Я получил ответ от Зиада Сааба по адресу Codementor.io:

  • create() позволяет тестировать виртуальный DOM (т. Е. «React 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'));
});

Зиад, дайте мне знать, что не было причин иметь act(), это было что-то, чтобы обойти ошибку в create(). Теперь, когда код не используется create(), нет необходимости в act().

. В результате мой снимок теперь содержит class вместо className, потому что class - это то, что находится вфактический HTML DOM, тогда как className является его эквивалентом в «Виртуальном DOM» React.

(До) Снимок с create() на основе Виртуального DOM React: 

className="MuiBox-root MuiBox-root-256"

(После) Снимокс render() на основе HTML DOM: 

class="MuiBox-root MuiBox-root-256"
...