E2E vs Unit Tests | Scrimba | Page 1

Overall question without extra reading:
When implementing E2E Testing, am I essentially testing for the same functionality as Unit Test but instead of specific components, E2E tests through site navigation (But either way the same functions/renders?) Or am I completely off track?

I have a question if anyone could shine some light on it, what is the actual difference between Unit Testing and E2E Testing ? I get that Unit tests render a specific component and test from there, and E2E tests from the start of a url/webpage and navigate through (using Cypress), but after that do they essentially test for the same elements/function calls? I asked ChatGPT to give me examples of both types of tests on the same component and aside from the different technologies used (Jest vs Cypress) it seems that they test the same thing/functionality.

An example being it stated this unit test:
test("calls deleteFunction when Yes button is clicked", () => {
const deleteFunctionMock = jest.fn();
render(
<DeleteModal
deleteFunction={deleteFunctionMock}
cancelFunction={() => {}}
/>
);

const yesButton = screen.getByText("Yes");
fireEvent.click(yesButton);

expect(deleteFunctionMock).toHaveBeenCalled();

});

and then this E2E test:

it("should call delete function when Yes button is clicked", () => {
cy.window().then((win) => {
const deleteFunctionSpy = cy.spy(win, "onDeleteFunction");
win.onDeleteFunction = "onYes"
cy.mount(<DeleteModal deleteFunction={win.onDeleteFunction} cancelFunction={onNo} />);

cy.contains("Yes").click();

expect(deleteFunctionSpy).to.be.calledOnce;
});

Aren't these the same thing? Do E2E tests just test the same functionality as a Unit Test but instead by following through a live version of a full site compared to a specific component? And I know ChatGPT isn't the catch-all, but I have looked around a bit and I am confused by how to specifically use either.

#E2E vs Unit Tests