DEV Community

How did we test hundreds of landing pages

Elias Lima on August 19, 2024

Automated tests are a great way to ensure the quality of your software and provide a good user experience. At Woovi, we have thousands of landing p...

Read full post

Horace Nelson • Aug 20

I'm not sure how much I like this. I think a lot but maybe a little. Perhaps my one issue is that a render test is the least amount of testing. Snapshot tests for each screen would add an acceptable level of coverage.

Elias Lima • Aug 20

And that’s exactly the problem we want to avoid—creating a test for each page when the content is static and completely different from each other is impractical. How would you test over 1000 pages like this?

Horace Nelson • Aug 21 • Edited

Assuming you're using Jest, adding "snapshot testing" is trivial, but will provide much better coverage. Something like:

test.each(screens.map(({ name, component: Screen }) => [name, Screen]))(
  'Render and snapshot screen: %s',
  (_, Screen) => {
    const component = render(<Screen />);
    expect(component).toMatchSnapshot();  // <---- Add snapshot testing
  },
);

This will take a "snapshot" of the the render output, and ensure it doesn't unexpectedly change.

Alexander Opalic • Aug 25

But wouldn't this mean you'd have a huge snapshot, namely the whole DOM for a page? Every time you change something, you'd need to look into the test and then update it.

Horace Nelson • Aug 25 • Edited

You're right about that. You can configure Jest to generate separate snapshot files by creating what Jest calls a "snapshot resolver."

const path = require('path');

module.exports = {
  /**
   * Saves snapshots in a __snapshots__ folder near each component file
   * @param testPath 
   * @param snapshotExtension 
   * @returns 
   */
  resolveSnapshotPath: (testPath, snapshotExtension) => {
    const dir = path.dirname(testPath);
    return path.join(dir, '__snapshots__', `${path.basename(testPath)}${snapshotExtension}`);
  },
  resolveTestPath: (snapshotPath, snapshotExtension) => {
    return snapshotPath.slice(0, -snapshotExtension.length);
  },
  /**
   * This is a little confusing, but this is the path to the test file that
   * Jest will use to check for consistency between `resolveSnapshotPath` and
   * `resolveTestPath`. It just needs to point to a real test file.
   * @type {string}
   */
  testPathForConsistencyCheck: 'some/example.test.js',
};

Then you tell Jest to use your snapshot resolver in your Jest config file (jest.config.js):

module.exports = {
  snapshotResolver: './snapshotResolver.js',
};

And updating all of those snapshots is as easy as running jest -u.

chrischism8063 • Aug 19

This looks useful!!!

CodePassion • Aug 21

Great post!

Manvendra Singh • Aug 21

Snapshots shouldn't be used to test. These only tell you that something rendered without a probable problem, but it doesn't convey any information about something. For example, it wouldn't tell you if a hero image is rendered on the top or in the middle, which I think you would like to test.

Horace Nelson • Aug 21

You probably read that somewhere or heard it from a more senior dev, but it's wrong. Snapshots should absolutely be used to test. They just shouldn't be your only test, as they test at one of the highest possible scopes for a component, but it is the best way to test render, which is a unit that needs to be tested. Regardless, snapshot testing will at least provide better coverage than him simply checking if the component renders without error since he can't feasibly do specific unit tests.

Horace Nelson • Aug 22

How did you get so many likes and saves on your first post? 😂

Ricardo Esteves • Aug 20

Ok interesting, have to check it out!