JavaScript Testing Tools
In this article I will catch you up with the most important tools to JavaScript testing.
Front-end testing
Testing in JavaScript
Testing frameworks and libraries
Testing in JavaScript
Generally, there are three types or ways we can use them in JavaScript application testing, and we talked about them in the previous article
- End-to-End test
- Integration test
- Unit test
Testing frameworks and libraries
And now let us take a quick overview of frameworks and libraries that we can use them in front-end frameworks ( react- angular- vue.js ), and vanilla JavaScript testing.
Jest
Jest is one of the most popular frameworks that is maintained by Facebook. It is preferred framework for the react.
Some of the jest common features are:
- The secret is a tool called a mock is effectively a shortened version of a function. Instead of running the function you stub out the result you want. Your code will return what you want instead of running the live code.
Mocking is just replacing a live piece of code with a simple function that returns the data you expect. - Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
you can take a snapshot, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match.
Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your Components’ output.It is recommended to test react components with Jest.
Enzyme, created by Airbnb, adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.
Some of the Enzyme common features are:
Enzyme has three methods for rendering React components. These methods give different results and we use them in different cases.
- Shallow :
Render component only without render its children. - Mount :
Render component with its children. - Render :
Render full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs.
Jasmine
Jasmine is a user-behavior mimicker that allow you to perform test cases similar to user behavior, it is recommended by Angular for developers to use it. Jasmine does not test the entire application as a whole but rather breaks down tests to small units or statements.
Some of the Jasmine common feature are:
- It is used for testing both synchronous and asynchronous JavaScript Code.
- It does not require DOM and comes with the easy syntax that can be written for any test.
- You don’t need to include assertion library in it, because it has own built-in assertion library and a built-in spyOn() function.
Karma
Karma is a productive testing environment that supports all the popular test description framework within itself, like Jasmine, and Mocha.
It launches an HTTP server, through host a test server with a special web page to run your tests in the page’s environment. This page can be run across many browsers.
With Karma, you can execute JavaScript code in multiple real browsers.
Some of the Karma common features are:
- It was built to simplify the feedback loop between writing code and getting information from your tests, without having to dabble in configurations.
- You can run tests locally and check them in real browsers and devices, on your phone or tablets and desktops.
Mocha
Mocha is one of the most popular JavaScript framework testing for Node.js programs essentially since it was first introduced in 2011, and recommended for vue.js testing.
Some of the Mocha common features are:
- Mocha has excellent support for promises and async functions.
- Unlike many other test frameworks, Mocha doesn’t come with a built-in assertion library,so you’d need to include assertion libraries like chai and enzyme.
Assertion is an expression which helps system (Mocha in this case) to know code under test failed. Assert’s job is to just throw an error when things are not correct or right. Assert tests the expression and it does nothing when expression passes but throws exception in case of failure to tell the test framework about it.
Chai
Chai is one of the most popular assertion libraries when writing test suites with Mocha.
Some of the Chai common features:
Expect() and should are Chai’s basic functionalities helping you to declare what to expect in a test.
- The expect provides function for assertion.
Ex: expect( isValid ).to.be.true. - The should provides property for assertion.
Ex: isValid.should.equal(false).
Conclusion
In order to get a more flexible functionality, it’s common to use a combination of tools, and I will recommend to you the best feature in each tool:
- Mocha, Jasmine, Jest : Provide a testing structure.
- Chai, Jasmine, Jest : Provide assertions functions.
- Mocha, Jasmine, Jest, Karma : Generate, display, and watch test results.
- Jest : Generate and compare snapshots of component to make sure changes from previous runs are intended.
- Jasmine, enzyme, Jest : Provide mocks, spies, and stubs.
Front-End Testing :
https://medium.com/@alaadawabah/front-end-testing-ae28e3d8febb
How to write front-end test case: https://medium.com/@raneen.medhat/front-end-testing-form-the-developer-side-2b6703a621bd
References
