In this article, I am going to share some testing strategies of the app I am working on. It is an insurance app made with react/nextjs for The General.
We mainly use storybook and jest test.
Storybook
We follow atomic design, so we design and make components from bottom up. We would make our own version of TextField and Button etc (those are called atoms), and for the component that integrate them together we call them molecules. The highest level of component are pages.
We create storybook stories for all of those “atom”, “molecules” and pages in storybook so that UI testers could compare them with the mockup and find visual bugs.
I think storybook provides two values: for visual testers to identify mismatch with the mockup and for developers to find a component he or she needs.
Jest
Where as Storybook is for visual testing. Jest is used for behavior and functional testing.
Unit test or semi-integration tests are written in jest to test functions and hooks, and behaviors of a component and hooks.
Testing functions and hooks
There are low level functions, and high level functions that uses or “integrate” small functions. In my mind, small functions should be covered by the tests more than high level functions. In small function tests, you can test a lot of edge cases or different scenario easily, whereas in high level function tests, probably you just need to test for happy path because error cases or edge cases are already covered by low level function tests. High level functions takes longer to run and the combination of different cases from the small functions are too many to be tested.
In short, low level function tests should be detailed (different kind of input maybe) and cover edge cases, even error cases. Higher level function test are just more focus on happy path integration of smaller functions or new test case stem from integration.
React Hooks Testing Library is used for testing hooks.
Testing behaviors of components
Some components have behaviors. For example, we have a vehicle picker component that have year, make, model and type dropdowns. One rule is , before year is selected, make, model, and type dropdown would be greyed out. In this case, we use React Testing Library to render the DOM in the memory, find the element, interact the element, and assert elements should be in certain state.
Further reading:
