How to unit test the plethora of js frameworks?

Question

There's a bunch of popular javascript frameworks such as

• Angular
• React
• Vue
• Ember
• Meteor

What tools exist for unit (white box) testing each of them? Does each framework support its own unit testing approach? Do you use Jasmine or Konacha? This is as opposed to black box testing the actual page with Selenium and supported programming languages and testing DSLs.

Answer 1

I have worked with a couple of JavaScript front-end frameworks (Angular, Ember and React) an all of them have their own tools to write (whitebox) tests. The (included) test frameworks let you render the components in isolation letting you verify their behaviour without the need of a browser. Letting you write unit like tests, but also integration tests.

Currently we are working with React:

• Jest is the test framework Facebook maintains themselves.
• Enzyme let's you render the component in a shadow-dom to check the components behaviors easier.
• The React testing documentation has some examples for Jest and Enzyme.

I would try to prevent to write all your tests with Selenium. Personally we only write one end-2-end test for each feature we build. Just to make sure it is testable and so that we test the happy-path end-2-end.

Just like with any other test-automation the majority of your tests should be around 75% unit-tests, 20% integration tests and only 5% blackbox-ui tests. I like the measurements of the Eiffel-tower for the balance.

Testing explained for the other frameworks:

• Ember: https://guides.emberjs.com/v2.11.0/testing/unit-testing-basics/
• Angular: https://docs.angularjs.org/guide/unit-testing
• Vue.js: https://v2.vuejs.org/v2/guide/unit-testing.html
• Meteor: https://guide.meteor.com/testing.html