Imagine a scenario where there is a class component with the following structure:
export class Math extends React.Component {
...
someComponentMethod = numb => {
const sample = numb * 10
...
const result = numb -5
return result
}
Can we write test assertions for the sample variable in Jest?
One cannot write assertions for the private workings of functions.
I have personally found this limitation beneficial in promoting the creation of better tests. By focusing on testing only the public API for accuracy, developers can freely refactor internal components without needing to modify existing tests. The current tests continue to validate that any changes to internals function correctly.
Testing internal behavior can significantly increase the maintenance effort required for the tested code. Due to the close connection between the tests and the source code, they become more intricate when modifications are made. This heightened complexity can decrease the reliability of the tests as frequent alterations raise the risk of introducing bugs into the test cases themselves.
If there is a need to evaluate some internal behavior, it might be an opportune moment to extract certain functionality. For instance, the calculation of the sample value could be separated into its own standalone pure function:
export class Math extends React.Component {
...
computeSampleValue(input) {
return input * 10
}
someComponentMethod = numb => {
const sample = this.computeSampleValue(numb)
...
const result = numb -5
return result
}
}
This separation allows for asserting that the process used to determine the sample value functions properly across different inputs. Moreover, extracting logic like this often enhances the readability of the someComponentMethod.
If there is a necessity to examine other internal behaviors despite the additional coding burden, one approach would be to have the method trigger side effects and then verify those through assertions. For example, instead of defining sample as a variable within the function scope, create a this.sample property on the component instance and update it accordingly. In a test scenario, execute the target method and subsequently confirm that componentInstance.sample reflects the expected changes.
By experimenting with testing variable values within a function, I was able to achieve the following:
calculation.js
function calculate() {
result = 1 + 2;
};
module.exports = calculate;
calculation.test.js
const calculate = require('./calculation');
calculate();
test('sum of 1 + 2 should be 3', () => {
expect(result).toBe(3);
});
I hope this example proves helpful! Thank you!
How can I achieve the same text animation effect on my website as seen on the homepage of ? I want to utilize the library available at . Specifically, how do I stop the animation when the text is clicked, allowing users to input their own text? Below is ...
Let's say I have a variable called, let Info and an array like this one, let arr1 = [4,5,6] I need to add the elements from arr1 into Info as an array, Here is what I attempted, for(let i =0;i<arr1.length;i++){ Info = [] Info = Info.push ...
I have a service in place that checks user authentication to determine whether to redirect them to the login page or the logged-in area. services.js: var servicesModule = angular.module('servicesModule', []); servicesModule.service('login ...
I am currently facing an issue with the jquery ui date picker in my AngularJS application. The date picker is functioning correctly outside of any ng-repeat loops, but it stops working when placed within one. <input type="text" class="form-control date ...
Is there a way in Vue.js for multiple parents to share the same child component? I am looking to have multiple delete buttons trigger a single modal with different content. For example: myfile.html: <table id="app" class="table table-striped table-s ...
Exploring AngularJs has been a delightful experience for me, and I recently stumbled upon a fantastic plugin for Angular called angular-http-auth. This plugin allows you to seamlessly integrate an identification system. Does anyone know of a similar resou ...
I have successfully fetched autocomplete options from an API and it displays the pre-selected options from the API. However, I am encountering an issue where I am unable to delete or add a value (category) once selected. For an online demo, you can check ...
To prevent duplicate numbers from being generated, I added a button that, when clicked by a user, displays a message indicating that the value is being saved to avoid duplicates. However, when attempting to handle this on the server side controller, I enco ...
Is there a way to bind the name and value attributes to a button? I am facing an issue with this and need a solution. I am attempting to achieve the following: <ion-button type="submit" color="primary" style="text-align:center& ...
I am facing an issue with the 'mongoose-unique-validator' plugin when trying to handle Mongo ValidationError in my custom error handler. Despite other errors being handled correctly, this specific one is not triggering the desired response from m ...
Encountering errors while running Gulp with Browser Sync in Chrome: NonESPMessageInterface --- nonEspMessageInterface.js:8 TypeError: Cannot read property 'insertBefore' of null --- angular.js:13708 Checklist message was invalid, from origin # ...
Looking for a smart method to resize multiple images to fit neatly inside a fixed-size div? I've considered using JavaScript to calculate the div's width, dividing it by the number of images, and resizing them equally while maintaining their asp ...
I am looking to manually set the user's locale and access it in getStaticProps for a multilingual static site. I have 2 queries: Can a multilingual website be created without including language in the subpath or domain? Why is Next misinterpreting m ...
I am facing an issue while trying to implement JQueryUI's DatePicker on a node. It works perfectly fine for all the existing nodes, but when I use the clone function to add new nodes, it doesn't seem to apply as expected. Here is the function th ...
After experimenting and seeking help on stackoverflow, I have managed to sort an array of objects based on the 'plate' key using the following function: sort(function(a, b) { return a.plate.toLowerCase() > b.plate.toLowerCase() ? a.pla ...
I have a unique challenge where I need to output some Javascript code on the browser screen for easy transfer to another program. Currently, I am utilizing JSON.stringify() from the json2.js library. However, this method is not correctly escaping characte ...
I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...
My goal is to combine two HTTP.get requests into one $scope in order to display the data in the same ng-repeat table. I am utilizing chained promises in my AngularJS application as shown below: AngularJS: function getContainer() { $http.get(" ...
I am currently exploring how to show markers/popups on an osm map using openlayers3. While I have come across some examples on the ol3 webpage, I'm interested in finding more examples for coding markers/popups with javascript or jquery, similar to som ...
While utilizing a flood fill algorithm to fill circles drawn on the canvas, I've encountered an issue where the algorithm fails to fill right up to the edge of the circle. Here is the implementation of the algorithm based on this blog post: function ...