Как я могу сделать тест в реакции с шуткой?

Question

import React from 'react'
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json';
import {ScreensLogin} from './Login'

test('render correctly', () => {
const state = {
    email: '',
    passwd: '',
    sendEmail: ''   
}
const props = {
    auth: {
        isAuth: false,
        error: false,
        isSigningin: false,
        emailSended: false
    },
    newPage: jest.fn()
}
const wrapper = shallow(<ScreensLogin {...props, ...state}/>)
expect(toJson(wrapper)).toMatchSnapshot()
})

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

Answer 1

Я предполагаю, что основной вопрос о переходе состояния в компонент во время тестирования.

Ты можешь сделать это? Да, но по-другому. Точно так же, как вы делаете в plain Реакция, вы не можете создать компонент (shallow(<...>) делает это) переходное состояние. Здесь играют только реквизиты. Но есть метод .setState(), так что вы можете создать элемент и состояние прохождения следующей строки в:

const wrapper = shallow(<ScreensLogin {...props}/>)
wrapper.setState(state);

Тебе это нужно? Я верю, что нет. Я уверен, что вам нужно общаться с тестируемым компонентом точно так же, как вы работаете с ними в браузере:

1. прохождение разных реквизитов
2. явный вызов обратных вызовов props неявным образом (wrapper.simulate('click', {/*event mock here*/}) делает то же самое, что и wrapper.props().onClick({/*event mocked*/}))
3. проверка render() результат

Почему так? 1. установка state напрямую ничего не говорит, если возможно получить такое состояние в дикой природе (скажем, вы можете пропустить, что свойство какого-то состояния используется в render, но никогда не изменяется ни одним из методов) 2. было бы сложнее поддерживать актуальность тестов: наряду с любыми изменениями во внешнем интерфейсе компонентов (props) необходимо согласовать его с внутренними компонентами (state) 3. и, наконец, было бы легко столкнуться с противоречивым состоянием, которое вы никогда не получите, взаимодействуя через props

Answer 2

все зависит от ваших намерений с тестами.если вы хотите просто что-то простое, чтобы следить за тем, как выглядят ваши компоненты, и какую-то простую логику, тогда вы можете продолжить свой текущий способ обработки рендеринга и тестирования некоторой комбинации реквизитов.

Другой способ - это рендеринг всегоприложение, в котором вы можете проверить, как в реальном браузере, и вы можете делать больше вещей, как конечные пользователи.Эту я обычно предпочитаю, но для запуска требуется больше времени.Этому тоже понадобится JSDom.вы можете сослаться на https://airbnb.io/enzyme/docs/guides/jsdom.html, они очень хорошо документировали обо всех различиях между мелким, рендерингом и монтированием

Остальной метод - монтировать, монтировать немного выше, чем мелкий и проще, чем рендер ивы можете использовать, когда хотите протестировать componentdidmount.