Rearrange test and storybook directory structure for frontend


There are a few changes we can make in the frontend directory structures to make things more consistent:

  • Move tests into the directory of the component under test. There are a few different patterns that would work:

    1. .../MyComponent/_tests_/foo.js

    2. .../MyComponent/MyComponent.test.js

    3. .../MyComponent/.test.js

  • Move component story.js files under the test directory

    • To exclude them from coverage without having a specific coverage exclusion for storybook files.

    • .../MyComponent/_tests_/story.js

File lookup can be easier if the component name is included in the filename for tests, stories, etc. so we may want to go with MyComponent.test.js and MyComponent.story.js

The overall contents of a component directory may look something like:

Or like this:


  • Move/rename all test and storybook files to the decided-upon file structure.

  • Update config for Jest so it has the minimum possible amount of filename exclusions.

  • All tests must still run and pass.

  • All defined component stories must still be shown in the running storybook.

Technical Notes

Config option for Jest to ignore the story files: testPathIgnorePatterns

Check whether Jest treats all non-test files as eligible for coverage, or just those not in _tests_ directories. A coverage exclusion for the story files may still be needed even if they are in _tests_.

Ready for Release
Your pinned fields
Click on the next to a field label to start pinning.


David Mason


David Mason

Tested Version/s