Add more comprehensive testing

[fivethreeo]

After adding a feature pull request a need for more comprehensive testing manifested itself. Was thinking I could try setting up some tests with react-testing-library. @theKashey suggested testing with a webpack build aswell.

Adding this issue to start a discussion about how best to do that.

[fivethreeo]

Trying to set up cypress with webpack to test components. But it does not accept array webpack configuration. So maybe use patch-package to add that or go with another solution.

[fivethreeo]

Some progress, but not sure cypress is the right way to go https://github.com/fivethreeo/loadable-components/tree/testing/cypress/examples/server-side-rendering

[fivethreeo]

Selenium is a better solution for testing https://github.com/fivethreeo/loadable-components/blob/testing/selenium/examples/server-side-rendering/__tests__/selenium-test.js

[theKashey]

You are mixing Cypress component testing with Selenium e2e testing. Try Cypress e2e or Playwring e2e. Ie the "classic" modes when the test suite is used against another running artefact.

[fivethreeo]

Ah, duh :) Cypress , playwright or selenium, any preferences?

[fivethreeo]

By the way, I could move the loadable monorepo over to pnpm if you want. A lot faster and the examples don't need to clear out node_modules when packages rebuild.

[fivethreeo]

Cypress e2e seems good. Just need a test strategy. Maybe add a window method to kick off loading and hydration.

[theKashey]

I see two strategies:

• dev mode(white box testing): hook into console.error and console.warning and expect them not to happen.
  • optional: hook into console.log and "console.log" sequence of events: waiting for loadable, hydration, done
• prod mode(black box testing): load HTML, get references to dom elements, hydrate, except references to exists.

In both cases feel free to export required commands to window and call them directly from Cypress.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.