Я помещаю свои тестовые компоненты в компонент <StateProvider>
, который является поставщиком контекста для состояния моего приложения.
Чтобы предотвратить изменение состояния тестовых компонентов между тестами и обеспечить, чтобы все тесты начинались с одного и того же начального состояния, я пытаюсь использовать jest.isolateModules()
для моего <StateProvider>
компонента. Это не работает, потому что мои тесты не проходят из-за изменений в состоянии, переносимых между тестами.
Вот соответствующий код для компонента-оболочки, который используется для каждого теста:
const AllTheProviders = ({ children }) => {
let myStateProvider;
jest.isolateModules(() => {
myStateProvider = require('./components/state')
});
const { StateProvider } = myStateProvider
return (
<StateProvider>
{children}
</StateProvider>
);
};
У меня есть пример репо здесь: https://github.com/TidyIQ/rtl_test_failure/
Если вы запустите тест, вывод в консоли будет (отформатирован для ясности):
running first click test 1 ***************************
component receives 'showPassword' state as: false
first click
returning 'showPassword' state as: true
component receives 'showPassword' state as: true
END OF TEST :::::::::::::::::::::::::::::::::::
running first click test 2 ***************************
component receives 'showPassword' state as: true // <<<< ISSUE IS HERE
first click
returning 'showPassword' state as: false
component receives 'showPassword' state as: false
running second click test 1 ***************************
component receives 'showPassword' state as: false
first click
returning 'showPassword' state as: true
component receives 'showPassword' state as: true
second click
returning 'showPassword' state as: false
component receives 'showPassword' state as: false
END OF TEST :::::::::::::::::::::::::::::::::::
running second click test 2 ***************************
component receives 'showPassword' state as: false
first click
returning 'showPassword' state as: true
component receives 'showPassword' state as: true
second click
returning 'showPassword' state as: false
component receives 'showPassword' state as: false
END OF TEST :::::::::::::::::::::::::::::::::::
Я подчеркнул, где проблема. После запуска первого теста компонент должен получить showPassword
состояние как false
, что является значением по умолчанию, однако он получает то же значение состояния, что и предыдущий тест (true
) .
Поскольку компонент <StateProvider>
изолируется для каждого теста, я ожидаю, что состояние будет сбрасываться для каждого теста, однако, как вы можете видеть, это не так.
Я не могу понять, что я здесь сделал неправильно. У кого-нибудь есть понимание?