In this post, we are trying to give some insights of different ReactJS test automation frameworks.
Attractions of Jest:
- Jestworks out of the box with minimal setup or configuration.Much of this is because it comes with an assertion library and mocking support.
- The tests are written in BDD style, similar to any other modern testing library. You can literally just put your tests inside of a directory called __tests__ or name them with a .spec.js or .test.js extension, then run jest and it works.
- Jest also supportssnapshot testing, which can be really handy for preventing accidental UI regressions when doing React development. These tests record snapshots of rendered component structure and compare them to future renderings. When they don’t match, your test fails, indicating that something has changed. You can easily tell Jest to update the snapshot if this change is expected (e.g. for a newly added feature).
- It has an awesome interactive watch mode that reruns only tests that are relevant to your changes.
- You can easily create code coverage reports using –coverage. No additional setup or libraries needed! Jest can collect code coverage information from entire projects, including untested files.
- It integrates seamlessly with Babelthrough babel-jest and with TypeScript through ts-jest.
Flaws of jest:
- It has less tooling and library support available compared to more mature libraries (like Mocha). Sometimes this type of tooling can be really handy, like the ability to run and debug your tests in an IDE like WebStorm.
- Due to its young age, it may also be more difficult to use Jest across the board for larger projects that utilize different types of testing.
Attractions of Cypress:
- Cypress automatically waits for the DOM to load, elements to become visible, the animation to be completed, the XHR and AJAX calls to be finished, and much more. Hence, there is no need to define implicit and explicit waits.
- Cypress is intelligent enough to know that after saving your test file (xyz_spec.js file), you are going to run it again, so it automatically triggers the run next to your browser as soon as you press to save your file. Hence, there is no need to manually trigger the run.
- Cypress gives you the ability to directly debug your app under test from chrome Dev-tools, It not only gives you straightforward error messages but also suggests you how you should approach them.
- Cypress also operates at the network layer by reading and altering web traffic on the fly. This enables Cypress to not only modify everything coming in and out of the browser but also to change the code that may interfere with its ability to automate the browser. Cypress ultimately controls the entire automation process from top to bottom.
- Having ultimate control over your application, the network traffic, and native access to every host object unlocks a new way of testing that has never been possible before. Instead of being “locked out” of your application and not being able to easily control it, Cypress instead lets you alter any aspect of how your application works.
- Cypress is platform independent which means you can write and cover any Framework/Stack. You can even import your ES6 and JSX and write Unit Tests for it.
Flaws of Cypress:
- No file upload support. No cross-browsers testing. Never knowwhen these things will be covered, for big projects these features are crucial.
- Nothing to say, it’s a commercial company. You never know about plans of monetization in future.
Attractions of Nightwatch:
- Clean syntax which allows one to automatebrowser native user actions like click, type, etc.
- Built-in test runner with a ton of features to run test by group, in parallel or sequential manner.
- Grunt supportallows one to control selenium server by starting/stopping whenever tests are initialized.
- Remote selenium server support.
- Continuous Integration tools support include Jenkins, TeamCity, Hudson etc.
- Reporting support include JUnit XML report and also an in-built reporting format.
- As all other JS libraries, it is extensible easily – One can write custom commands, assertions.
- Either CSS or Xpath selectors can be used to locate and verify elements on the page or execute commands.
- Works with cloud testing providers, such as SauceLabsand BrowserStack.
Enzyme supports shallow rendering, full DOM rendering and static rendering. Shallow rendering is useful for to test the component as a unit without relying on the behaviour of any child nodes. It also prevents any errors in the child nodes from affecting the tests for the parent component. Full DOM rendering can be useful if the full lifecycle is needed to test the component – for instance, testing componentDidMount – or if the component is expected to interact with DOM APIs. Static rendering is useful for testing the HTML structure of a React component as it renders the React component in static HTML. All three forms of rendering return wrapper objects that make it very easy to traverse and manipulate for testing.
Attractions of Enzyme:
- The number of methods available for querying the DOM makes tests easy to implement and readable. For instance, contrast the React test utils’s scryRenderedDOMComponentsWithTag with Enzyme’s .find() method to search the render output for a tag.
- A key part of front-end testing is simulating user events. Enzyme provides an elegant method to simulate such events through its .simulate() method, which takes as arguments the event name to be simulated as a string and any optional arguments the event handler might require.
- Enzyme has a debug() method which returns the render output as a string in formatted HTML which is convenient for debugging when tests are failing and to understand the structure of the component. It is easy to see all the parts of the component and easy to diagnose if the tests are failing.
- Enzyme is compatible with most assertion libraries and test runners. Our team uses it with Mocha and Jasmine, but it can be used with Chai, Karma, Jest or React Native etc.
WebDriverIO provides language bindings for the powerful browser-driving tool Selenium. Its test runner allows you to write your tests in a synchronous way so you’re not constantly in the world of asynchronous coding. Luckily WebDriverIO integrates easily with the CrossBrowserTesting platform, so you can perform tests on a wide variety of OS/Device/Browser combinations, all from one test.
Attractions of WebDriverIO:
- WebdriverIO lets you use your favorite testing framework (Jasmine, Mocha, Cucumber) and assertion library (Chai for Mocha). Other projects implement their own testing and assertion APIs, for example Nightwatch, Intern.
- By running the commandwdio config WebdriverIO will generate a config file for testing locally vs. in the cloud, specifying the test framework (Jasmine, Cucumber, Mocha), where to find tests and store screenshots etc.
- WebdriverIO has a plugin called WebdriverCSS that allows you to do cross visual platfrom/browser tests with an integration to Applitools.
- WebdriverIO is accessible via gulp and grunt and even has a Sublime Text plugin for autocompletion.
Flaws of WebDriverIO:
- Tasks written in Selenium API can only be debugged using the provided WDIO task runner. You can’t set breakpoints within tasks, but you can have WDIO pause the run between Selenium commands.
- selenium-webdriverjs starts the Selenium server automatically, and actually manages to achieve a faster startup time (4 seconds vs. 5.5) than WebdriverIO.