The Difference Between Integration Testing and End-to-End Testing Chris Coyier

Publish date: 2024-04-06

I don’t think there is any doubt that this is a unit test:

function sum(a, b) { return a + b; } test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); });Code language: JavaScript (javascript)

You have a function, and you’re testing that the function returns what you think it should return. A code base probably has lots of this as they are easy to write, useful, and not flakey.

I also don’t think there is any doubt about what an end-to-end test is. The quintessential end-to-end test is like “go to this URL, fill out this form, click the submit button, and see if the right thing happens. Cypress is king here.

it('adds todos', () => { cy.visit('https://todo.app.com') cy.get('[data-testid="new-todo"]') .type('write code{enter}') .type('write tests{enter}') cy.get('[data-testid="todos"]').should('have.length', 2) })Code language: JavaScript (javascript)

Unit and end-to-end tests are the extremes on two sides of a spectrum. On the left, unit tests, little itty bitty sanity testers. On the right, end-to-end tests, big beefy (cough; sometimes flakey) tests that prove that lots and lots of systems are working together as intended and what a user experiences is in good shape. Even though the amount of code in the test isn’t super different, what is being tested is wildly different.

I think integration tests are a dot somewhere in the middle of that spectrum.

Integration tests combine multiple systems in your app. API tests seem like a quintessential example to me. You could certainly unit test parts of an API, but tests that use the API as you would actually interact with it in your web app are the juicy onces. Meaning combining multiple systems. Integrating systems, as it were.

Say your API is in GraphQL and your front end uses Apollo Client to interact with it. An integration test could be…

  • In JavaScript…
  • Spin up Apollo and have it connect to the same GraphQL server the current environment uses (dev, staging, prod, etc)
  • Write a query and/or mutation that hits the API and does something
  • Test what you get back
  • … in Jest or whatever.

    • Now you’re testing a limited set of multiple systems and that’s an integration test.

    Highly related:

    Related

    ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpa2dhZnxyfY6tn55llJ6zp7HRnqWcnV2XsrXDxJ6lZqGeqbKovsCtoKimXamytMDIp55mmZ6Zeqa6w2arqGWVo7FuwMSsq6Kml2Q%3D