Jest with React - Как вы визуализируете весь компонент и проверяете его?

Question

Предположим, у меня есть простой компонент приложения, и я запускаю для него тест, чтобы увидеть, просто ли он возвращает div, который выводит Hello World на экран. Каков вспомогательный элемент функции для рендеринга приложения внутри моего файла тестирования? Кроме того, какова функция вызова в ожидающем вызове для проверки отображаемого HTML-кода?

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App' 

describe("App",() => { 
    it('prints "HELLO WORLD" to the screen',() => { 
    expect(**App??**).**toRENDER??**("HELLO WORLD") 
    } 
} 

Благодаря

Answer 1

Это хорошая практика, чтобы использовать enzyme библиотеку из Airbnb.

Существует example использования обоих вместе

Ваш код может выглядит следующим:

import React from 'react' 
import ReactDOM from 'react-dom' 
import App from './App' 
import {shallow} from 'enzyme' 

describe("App",() => { 
    it('prints "HELLO WORLD" to the screen',() => { 
    const wrapper = shallow(<App />) 

    expect(wrapper.text()).toBe("HELLO WORLD") 
    } 
} 

Answer 2

Вы хотели бы посмотреть на Jest-х snapshot testing для этого. Это так же просто, как вызов:

import renderer from 'react-test-renderer'; 

describe('snapshot testing',() => { 
    it('should render App',() => { 
    const component = renderer.create(<App />); 
    const tree = component.toJSON(); 
    expect(component).toMatchSnapshot(); 
    }); 
}); 

Файл снимок будет сохранен в папке __tests__/__snapshots__. Убедитесь, что вы скопировали эти файлы моментальных снимков в свой репозиторий Git, чтобы другие участники могли иметь моментальный снимок для своих компонентов.

Для получения дополнительной информации о том, как настроить тестирование моментального снимка Jest с помощью React, обратитесь к этому docs here, поскольку вам необходимо установить некоторые зависимости npm.