Shallow jest-enzyme unit test generates coverage for entire application tree - reactjs

Question

I have (for demonstration purposes) an extremely simple React component:
import React, { Component } from 'react';
import { fetchUser, fetchNews } from '../../infrastructure/actions';
class Layout extends Component {
render() {
return (
<div />
);
}
}
export default Layout;
and a simple Jest snapshot test:
import React from 'react';
import { shallow } from 'enzyme';
import Layout from '../Layout';
describe('rendering', () => {
it('should render valid snapshot when loading', () => {
const jsx = (<Layout />);
const element = shallow(jsx);
expect(element).toMatchSnapshot();
});
});
The relevant line here is the
import { fetchUser, fetchNews } from '../../infrastructure/actions';
infrastructure/actions/index.js is a barrel file full of Redux actions, thus:
export { fetchNews, FETCH_NEWS } from './news/fetchNews';
export { fetchUser, FETCH_USER} from './user/fetchUser';
// ...etc
My issue is that even though nothing in the import statement is being used in the shallow-rendered component, Jest's code coverage report is treating EVERY module in the infrastructure/actions/index.js file as having been both imported and executed, leaving me with a useless code coverage report that looks like this.
--------------------------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
--------------------------------------------------|----------|----------|----------|----------|-------------------|
All files | 56.08 | 38.46 | 5.17 | 56.08 | |
display/containers | 100 | 100 | 100 | 100 | |
Layout.js | 100 | 100 | 100 | 100 | |
infrastructure/actions | 100 | 100 | 100 | 100 | |
index.js | 100 | 100 | 100 | 100 | |
infrastructure/actions/characters | 50 | 0 | 0 | 50 | |
fetchCharacters.js | 50 | 100 | 0 | 50 | 3 |
fetchedCharactersFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedCharactersSuccess.js | 50 | 100 | 0 | 50 | 3 |
untrackCharacter.js | 50 | 100 | 0 | 50 | 5 |
untrackCharacterFailure.js | 50 | 100 | 0 | 50 | 3 |
untrackCharacterSuccess.js | 50 | 100 | 0 | 50 | 3 |
upsertCharacter.js | 50 | 0 | 0 | 50 | 5 |
upsertCharacterFailure.js | 50 | 100 | 0 | 50 | 3 |
upsertCharacterSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/help | 50 | 100 | 0 | 50 | |
submitContactForm.js | 50 | 100 | 0 | 50 | 5 |
submitContactFormFailure.js | 50 | 100 | 0 | 50 | 3 |
submitContactFormSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/news | 50 | 100 | 0 | 50 | |
fetchNews.js | 50 | 100 | 0 | 50 | 3 |
fetchedNewsSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/public | 50 | 0 | 0 | 50 | |
fetchPublicThreads.js | 50 | 100 | 0 | 50 | 3 |
fetchPublicViews.js | 50 | 100 | 0 | 50 | 3 |
fetchedPublicThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedPublicThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
fetchedPublicViewsFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedPublicViewsSuccess.js | 50 | 100 | 0 | 50 | 3 |
untrackPublicView.js | 50 | 100 | 0 | 50 | 5 |
untrackPublicViewFailure.js | 50 | 100 | 0 | 50 | 3 |
untrackPublicViewSuccess.js | 50 | 100 | 0 | 50 | 3 |
upsertPublicView.js | 50 | 0 | 0 | 50 | 5 |
upsertPublicViewFailure.js | 50 | 100 | 0 | 50 | 3 |
upsertPublicViewSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/tags | 50 | 100 | 0 | 50 | |
fetchTags.js | 50 | 100 | 0 | 50 | 3 |
fetchedTagsSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/threads | 50 | 0 | 0 | 50 | |
bulkUntrackThreads.js | 50 | 100 | 0 | 50 | 5 |
bulkUntrackThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
bulkUntrackThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
bulkUpdateThreads.js | 50 | 100 | 0 | 50 | 5 |
bulkUpdateThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
bulkUpdateThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
exportThreads.js | 50 | 100 | 0 | 50 | 5 |
exportThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
exportThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
fetchActiveThreads.js | 50 | 100 | 0 | 50 | 3 |
fetchActiveThreadsStatus.js | 50 | 100 | 0 | 50 | 3 |
fetchArchivedThreads.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsStatusChunkFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsStatusChunkSuccess.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsStatusFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsStatusSuccess.js | 50 | 100 | 0 | 50 | 3 |
fetchedActiveThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
fetchedArchivedThreadsFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedArchivedThreadsSuccess.js | 50 | 100 | 0 | 50 | 3 |
generateRandomThread.js | 50 | 100 | 0 | 50 | 5 |
generatedRandomThreadSuccess.js | 50 | 100 | 0 | 50 | 3 |
setFilteredTag.js | 50 | 100 | 0 | 50 | 3 |
untrackThread.js | 50 | 100 | 0 | 50 | 5 |
untrackThreadFailure.js | 50 | 100 | 0 | 50 | 3 |
untrackThreadSuccess.js | 50 | 100 | 0 | 50 | 3 |
upsertThread.js | 50 | 0 | 0 | 50 | 5 |
upsertThreadFailure.js | 50 | 100 | 0 | 50 | 3 |
upsertThreadSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/ui | 50 | 0 | 0 | 50 | |
closeBulkUntrackThreadsModal.js | 50 | 100 | 0 | 50 | 3 |
closeUntrackCharacterModal.js | 50 | 100 | 0 | 50 | 3 |
closeUntrackPublicViewModal.js | 50 | 100 | 0 | 50 | 3 |
closeUntrackThreadModal.js | 50 | 100 | 0 | 50 | 3 |
closeUpsertCharacterModal.js | 50 | 100 | 0 | 50 | 3 |
closeUpsertPublicViewModal.js | 50 | 100 | 0 | 50 | 3 |
closeUpsertThreadModal.js | 50 | 100 | 0 | 50 | 3 |
openBulkUntrackThreadsModal.js | 50 | 100 | 0 | 50 | 3 |
openUntrackCharacterModal.js | 50 | 100 | 0 | 50 | 3 |
openUntrackPublicViewModal.js | 50 | 100 | 0 | 50 | 3 |
openUntrackThreadModal.js | 50 | 100 | 0 | 50 | 3 |
openUpsertCharacterModal.js | 50 | 0 | 0 | 50 | 5 |
openUpsertPublicViewModal.js | 50 | 0 | 0 | 50 | 5 |
openUpsertThreadModal.js | 50 | 0 | 0 | 50 | 5 |
setActiveHelpTab.js | 50 | 100 | 0 | 50 | 5 |
setActiveSettingsTab.js | 50 | 100 | 0 | 50 | 5 |
setActiveToolsTab.js | 50 | 100 | 0 | 50 | 5 |
setMaintenanceModeOn.js | 50 | 100 | 0 | 50 | 3 |
toggleHeaderDropdown.js | 50 | 100 | 0 | 50 | 5 |
toggleMobileSidebar.js | 50 | 100 | 0 | 50 | 5 |
toggleNewsAside.js | 50 | 100 | 0 | 50 | 5 |
toggleSidebar.js | 50 | 100 | 0 | 50 | 5 |
infrastructure/actions/user | 50 | 100 | 0 | 50 | |
fetchUser.js | 50 | 100 | 0 | 50 | 3 |
fetchedUserFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedUserSuccess.js | 50 | 100 | 0 | 50 | 3 |
submitUserAccountInfo.js | 50 | 100 | 0 | 50 | 5 |
submitUserChangePassword.js | 50 | 100 | 0 | 50 | 5 |
submitUserForgotPassword.js | 50 | 100 | 0 | 50 | 5 |
submitUserLogin.js | 50 | 100 | 0 | 50 | 5 |
submitUserLogout.js | 50 | 100 | 0 | 50 | 5 |
submitUserRegistration.js | 50 | 100 | 0 | 50 | 5 |
submitUserResetPassword.js | 50 | 100 | 0 | 50 | 5 |
userAccountInfoFailure.js | 50 | 100 | 0 | 50 | 3 |
userAccountInfoSuccess.js | 50 | 100 | 0 | 50 | 3 |
userChangePasswordFailure.js | 50 | 100 | 0 | 50 | 3 |
userChangePasswordSuccess.js | 50 | 100 | 0 | 50 | 3 |
userForgotPasswordFailure.js | 50 | 100 | 0 | 50 | 3 |
userForgotPasswordSuccess.js | 50 | 100 | 0 | 50 | 3 |
userLoginFailure.js | 50 | 100 | 0 | 50 | 3 |
userLoginSuccess.js | 50 | 100 | 0 | 50 | 3 |
userRegistrationFailure.js | 50 | 100 | 0 | 50 | 3 |
userRegistrationSuccess.js | 50 | 100 | 0 | 50 | 3 |
userResetPasswordFailure.js | 50 | 100 | 0 | 50 | 3 |
userResetPasswordSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/actions/userSettings | 50 | 100 | 0 | 50 | |
fetchUserSettings.js | 50 | 100 | 0 | 50 | 3 |
fetchedUserSettingsFailure.js | 50 | 100 | 0 | 50 | 3 |
fetchedUserSettingsSuccess.js | 50 | 100 | 0 | 50 | 3 |
setShowDashboardThreadDistribution.js | 50 | 100 | 0 | 50 | 5 |
updateUserSettings.js | 50 | 100 | 0 | 50 | 5 |
updatedUserSettingsFailure.js | 50 | 100 | 0 | 50 | 3 |
updatedUserSettingsSuccess.js | 50 | 100 | 0 | 50 | 3 |
infrastructure/constants | 100 | 100 | 100 | 100 | |
analytics.js | 100 | 100 | 100 | 100 | |
utility | 62.5 | 100 | 50 | 62.5 | |
testHelpers.js | 62.5 | 100 | 50 | 62.5 | 12,13,16 |
--------------------------------------------------|----------|----------|----------|----------|-------------------|
Needless to say, this negates the purpose of the code coverage report, since none of these files except for two of them are even related to the component under test -- and even for the ones that are, their code shouldn't be executed by this test.
Also of note -- down at the bottom the code coverage report, it references analytics.js which is actually imported by one of the child files of infrastructure/actions/index.js, not by the barrel file itself, meaning that the coverage is somehow traveling even further down the dependency tree.
As soon as I remove the line importing the actions, the coverage file immediately behaves itself again and reflects only the component being tested.
This also happens if I import a component which would (presumably) be used somewhere in the layout; I immediately start seeing coverage indications for that component and its children all the way down, even though I am only doing a shallow rendering in my component under test.
I've tried to use jest.mock() to mock these imports prior to running the shallow() method, but it doesn't seem to make any difference to the coverage output.
All of this leads me to believe I've done something wrong in setting my test environment up; I'd appreciate any guidance on what might cause this effect.

Answer 1

For those curious, I did some more digging and realized that this is actually expected behavior -- an imported file by default executes when it is imported, so while none of the functions inside the imported files were executed, the lines on which they were initialized were still being hit by virtue of their being imported.
The solution for this is to use Jest mocking to mock all the imports used by the system under test as part of your test initialization. I added this line to the bottom of the test file (Jest hoists it to the top of the tests during execution):
jest.mock('../../../infrastructure/actions', () => ({}));
(i.e. when an import calls for actions/index.js, then import a function that returns an empty object instead). And everything went back to normal.