Our React app is delivered in 3 variations. Let's call them Good, Better, Best; we use the ifdef-loader package to conditionally transpile our .tsx sources. The differences can be minor such as:
...
/// #if GOOD
title = "Good";
/// #elif BETTER
title = "Better";
/// #elif BEST
title = "Best";
/// #endif
...
In other cases the differences can be more significant.
We use Jest to test the React .tsx components. I need to come up with a reasonable method to test those .tsx components which differ between Good / Better / Best. We use Jest snapshots, and a goal is to minimize the snapshot folder/file structure changes brought on by the solution. For example, I would not want to triplicate all 500 .snap files to solve this. Currently less than 10 components use ifdef-loader.
I tried using Jest's snapshotResolver option to select a different .snap file for the few components which use ifdef-loader. It mostly worked, but it had the unwanted side effect of Jest claiming there were obsolete Good / Better / Best snapshots.
module.exports = {
resolveSnapshotPath, resolveTestPath, testPathForConsistencyCheck
};
If a component's differences between Good / Better / Best is only a string, then I'd want a single .test.tsx Jest file (but different .snap files, or something).
I wondered about transforming the ReactTestingLib.RenderResult result before passing it on to expect().
const result: ReactTestingLib.RenderResult = ...
const patchedResult = patchResult(result);
expect(patchedResult).toMatchSnapshot("version loaded");
This started to feel like a hack. So here I am asking.
This is my first React app and so I'm hoping those with more experience can offer suggestions.