I'm wrapping my test components in a <StateProvider> component, which is a context provider for my app's state.
To prevent the test components from changing state between tests and to ensure that all tests begin with the same initial state, I'm trying to use jest.isolateModules() on my <StateProvider> component. This isn't working though as my tests are failing due to the changes in state being carried over between tests.
Here's the relevant code for the wrapper component that's used for each test:
const AllTheProviders = ({ children }) => {
let myStateProvider;
jest.isolateModules(() => {
myStateProvider = require('./components/state')
});
const { StateProvider } = myStateProvider
return (
<StateProvider>
{children}
</StateProvider>
);
};
I have an example repo here: https://github.com/TidyIQ/rtl_test_failure/
If you run the test the output in console is (formatted for clarity):
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 :::::::::::::::::::::::::::::::::::
I highlighted where the issue is. After the first test is run, the component should receive showPassword state as false, which is the default value, however it receives the same state value as what the previous test returned (true).
Since the <StateProvider> component is being isolated for each test then I would expect that the state would reset for each test, however as you can see this is not the case.
I can't figure out what I've done wrong here. Does anyone have any insight?
Aucun commentaire:
Enregistrer un commentaire