This is the first end to end cypress test I wrote for this blog post. When it runs and passes I am highly confident that my blog posts are displaying successfully.

describe('Blog posts', () => {
  it('clicking "Chunking" renders the blog post', () => {
    cy.visit('http://localhost:3000/');

    cy.contains('Chunking').click();

    cy.location('pathname').should('eq', '/posts/chunking');
    cy.get('h1').contains('Chunking');
    cy.get('time').contains('August 11, 02020');
    cy.get('article p').contains('The human brain is capable of thinking about seven things on average.');
  });
});

In my package.json there is a script I named test:cypress, which runs the dev server on localhost 3000 and then runs the end to end cypress tests.

"test:cypress": "start-server-and-test dev http://localhost:3000 cypress",
"cypress": "cypress run",

Typing npm run test:cypress will now start my development server on and run cypress in one command. This allows me to integrate it into my on commit events, and run the integration test so that I know when I push new changes the markdown content is still being translated into readable blog posts with a high degree of confidence.

Tests are usually split into three parts.

1. Test setup
2. Action(s)
3. Assertions

In this case we are 1. launching the app, 2. going to the home page and clicking a blog post, and 3 validating the content is correct.

As a result I know that the markdown files are being rendered successfully to the posts/* routes. And that the title, date, and content is showing up as well.

This is important because I am using open source software, and if I test that the inputs I provide are still generating the matching outputs, I can more reliably use the software. If for some reason down the road my test breaks I will be able to proactively look at that before pushing a breaking change to this blog post.