Как установить начальное состояние с помощью ловушки useState

Question

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

describe('<Component/>', () => {
    beforeEach() = > {
        jest.spyOn(Readt, 'useState').mockImplementation( () => React.useState(['test']));
        //Also tried this:
        //React['useState'] = jest.fn().mockImplementation( () => React.useState(['test']));
    }
    it('should match snapshot', () => {
        expect(wrapper).toMatchSnapshot()
    }
}

Я тоже видел этот пост, но не смог заставить его работать на меня

Как установить начальное состояние для useState Hook в шутке и энзиме?

Я также читал, что вы не должны макетировать useState в вашем модульном тесте, но тогда как вы устанавливаете начальное состояние для вашего компоненты, если вы не издеваетесь?

Спасибо.

РЕДАКТИРОВАТЬ: Относительно ответа ниже:

Прохождение в опоре не меняет состояние I пытаюсь проверить.

У меня есть кнопка, которая при нажатии (одно состояние) отображает поле ввода, которое, когда пользователь вводит (другое состояние) и нажимает кнопку «ОК» (еще одно состояние), создает кнопка на основе содержимого в поле ввода.

Переданный реквизит помогает визуализировать список кнопок, но он не имеет никакого контроля над тем, что пользователь вводит в поле ввода. Я пытаюсь установить состояние в поле ввода, а затем имитировать нажатие кнопки «ОК» и проверить это. Я не пытаюсь проверить реагирует нативную функциональность useState. Я просто пытаюсь использовать то, что у энзима уже есть «wrapper.setState», но как мне это сделать с помощью useState?

В идеале я хотел бы настроить свой компонент, настроить состояние, в котором пользователь набрал в поле ввода, а затем проверить, выполняет ли кнопка «ОК» то, что она должна делать. Не имитируя все щелчки до этого.

Answer 1

Состояние компонента внутреннее для него, и это существенная часть понимания компонентов React. Как только вы это поняли, вы можете понять, что ни один тест не должен пытаться изменить его.

но тогда как вы устанавливаете начальное состояние для ваших компонентов?

Вы передаете значение в useState хук, внутри компонента . Затем ваши тесты должны проверить ваш компонент, используя это начальное состояние ... они должны просто передать props , чтобы изменить его, так же, как ваш не тестовый код.

Фактически, даже если вы каким-то образом можете изменить свое начальное состояние (что невозможно, AFAIK), ваш тестовый код НИКОГДА не должен делать ничего, что делает не тестовый код (за исключением настройки сред тестирования, которые имитируют реальных), начиная с весь смысл создания тестов состоит в том, чтобы убедиться, что ваш не тестовый код работает.

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

Если вы сделаете это, каждый тест, который вы напишете, будет ломаться в момент изменения любого из этих внутренних компонентов, и ОГРОМНАЯ часть ценности тестов состоит в том, что они позволяют вам легче проводить рефакторинг (, если , вы , а не тестирование внутренних органов). Вместо этого вы хотите использовать свои инструменты тестирования, чтобы измерить выход вашего компонента (ie. Что HTML он генерирует).

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

РЕДАКТИРОВАТЬ: Ответ на комментарий / редактирование вопроса

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

Но опять же, только то, что что-то возможно, не означает, что это хорошая идея, и снова, вы хотите проверить внешний вид из что угодно вы тестируете (не только компоненты React). Состояние компонента React похоже на переменную внутри функции: она внутренняя для этой функции / компонента, и вам следует избегать непосредственного тестирования .

Что вы вместо этого я хочу проверить это внешний кусок, и (основываясь на ваших изменениях) кажется, что это не props ... но это все же нечто внешнее: DOM.

Так вместо этого я бы порекомендовал сделать (опять же) то же самое, что делает не тестовый код: «нажать» на ваши кнопки. Enzyme делает это очень легко с помощью метода имитации (https://airbnb.io/enzyme/docs/api/ReactWrapper/simulate.html).

Если вы просто смоделируете последовательность кнопок, которая создает желаемое состояние, вы будете только тестировать внешние (ie. Тестируйте свой код так же, как он будет использоваться на производстве), но вы сможете протестировать любые обстоятельства, какие пожелаете.

Answer 2

Как насчет установки значения в зависимости от среды? Jest устанавливает переменную окружения NODE_ENV в 'test':

const inTest = process.env.NODE_ENV === 'test'

[value, setValue] = useState(inTest ? mockValue : defaultValue)