Vite brought super fast bundling and hot reloading to our regular dev workflow, and Vitest is doing the same for our testing workflow. So I'm mostly transitioning away from Jest in favor of Vitest. But there are a lot of amazing tools in the Jest ecosystem, and not of them can be easily replaced. Luckily, the Vitest API is mostly compatible with the Jest API...
The JavaScript ecosystem has a lot to offer when it comes to testing. With the recent addition of Vitest we get the performance and convenience features of Vite for testing too. Mock Service Worker is an excellent mocking solution for mocking network requests in the browser and Node.js...
In this article, we will take a closer look at how we can run automated cross-browser acceptance tests in real browsers on LambdaTest using TestCafe as our test framework...
If you test Vue.js Components with a certain complexity, oftentimes you'll be faced with the situation of repeating the same component initialization code again and again. There are multiple patterns to deal with situations like that but today we'll take a look at how we can solve this problem by using a wrapper factory function...
My very own CSS framework avalanche, uses BackstopJS for regression testing. Unfortunately, for the most time, this didn't work as expected on my continuous integration service of choice: Travis CI. The rendering of fonts is slightly different on the Linux image which is used on Travis CI compared to macOS which I use for development...
As most of my regular readers have probably already noticed, I'm a huge fan of testing all the things. In many of my recent articles, we've already explored multiple techniques for unit testing and acceptance testing. Unit testing ensures that certain parts (or _units_) of our code do work correctly with acceptance testing, we can guarantee that what we've built does what it should do. Visual regression testing makes it possible that we can test if our application looks the way it's supposed to look...
Although testing, and especially acceptance testing, seems like a rather boring topic (at least to many developers) in the past few months I acquired an interest in optimizing the test setup and come up with better ways of writing tests. Especially when using Nightwatch.js in combination with Cucumber.js, there is another challenging aspect to it: writing step definitions...
In my previous article about automated acceptance testing with Cypress I explored the possibilities of the `cy.route()` and `cy.clock()` commands. Because I fell in love with how easy it is to stub network requests and manipulate JavaScript timeout functions (like `setTimeout` and `setInterval`) with those two commands, I began to feel bad about not having this functionality in Nightwatch.js und Cucumber.js powered acceptance tests...
This is the second part of my article series about automated acceptance testing with Cypress. In the first part of this series we've learned how to set up Cypress. Today we're going to take a look at two advanced features of Cypress: Network Stubs and Timers...
In today's article, we're going to take a look at one of the rising stars in the automated end-to-end testing scene: Cypress. When I first discovered Cypress, I thought that it looks very promising, but I was skeptical if it can live up to the hype...
Thanks to the vue-test-utils, testing Vue components has become much more comfortable. But things can get a little more complicated if you add Vuex to the equation...
Today we will examine two ways how we can speed up the testing process with Nightwatch.js – because faster is always better. The first small speed improvement can be achieved by eliminating Selenium from the setup...
Testing Vue.js components is different from testing regular JavaScript modules or classes in two ways. First of all Vue.js components depend on Vue.js, its global state and oftentimes on plugins like Vuex or the vue-router. Second, Vue.js single file components usually are compiled with webpack, the regular workflow of using Babel to compile JavaScript code before testing it, is not sufficient in this case. Let's find out how to deal with those challenges...
Today, in the third and final part of this series about acceptance testing with Nightwatch.js and Cucumber.js, we will integrate automated cross-browser testing powered by BrowserStack into our workflow...
In an ideal world, it should be possible to write basic acceptance test specifications without having to add any new step definitions. In the real world this is not always possible, because some features, with some very specific functionality, might need special treatment and are impossible to test without writing custom step definitions...
Nightwatch.js is battle-tested and has proven to be a potent tool in the utility belt when it comes to conducting end-to-end tests. The combination of Nightwatch.js and Cucumber.js enables the writing of robust automated acceptance tests in plain language (Gherkin) so that every project stakeholder can read and understand the test definitions...
Today we're going to look at the approach of using CSS selector namespaces to help us with detecting changes which have to be considered in the tests. Using separate selectors for testing also leads to a more stable way of structuring our code without tightly coupling our tests with the markup and CSS styles of the implementation...
One problem you might encounter when trying to run cross-browser tests in multiple browsers on BrowserStack with TestCafe is the parallel test limit that depends on your BrowserStack plan. At the time of writing, all regular BrowserStack plans include only one parallel test - which means you can only run one automated test at a time...
In this article we'll build acceptance tests powered by TestCafe, BrowserStack, and npm scripts. After setting up local testing we configure Travis CI to automatically run our tests after pushing new code to a Git repository...
In this article, we will examine how to write unit tests for JavaScript code that is intended to run in the browser. We will use use ava as our test runner and the mock-browser package to simulate a browser environment...