Test Asynchronous Calls With the Jest

SARA-AHMED94 — Sat, 26 Jun 2021 00:54:22 +0000

It's common in JavaScript for code to run asynchronously. When you have code that runs asynchronously, Jest needs to know when the code it is testing has completed, before it can move on to another test. Jest has several ways to handle this.

Asynchronous calls don’t block or wait for calls to return. After the call is made, program execution continues. When the call returns, a callback function is executed. It’s hard to test asynchronous calls due to the asynchronous nature.

Callback-based asynchronous calls

The Problem of Asynchronous Calls

The following is a unit test case for an asynchronous call

describe('test asynchronous call', () => {
  it('this should not pass', () => {
    setTimeout(() => {
      expect(1).toBe(2);
    });
  });
});

Apparently, 1 isn’t 2, but the test passes.
setTimeout is called and returns. The test finishes before inside the setTimeout is executed. No error is found before the test exits — therefore, the test case passes.

The fix: Use the ‘done’ callback

We can fix this issue by waiting for setTimeout to finish.

describe('test asynchronous call', () => {
  it('this should not pass', done => {
    setTimeout(() => {
      expect(1).toBe(2);
      done();
    });
  });
});

We pass in Jest’s done callback to the test case and wait for setTimeout to finish. And then we invoke done() to tell Jest it can exit now. With the help of the done callback, this test case fails as expected.

Test Promise-Based Asynchronous Calls

If your code uses promises, there is simpler way to handle asynchronous tests. Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.

For example, let's say that fetchData returns a promise that is supposed to resolve to the string 'peanut butter'. We could test it with:

test('the data is peanut butter', () => {
  return fetchData().then((data) => {
    expect(data).toBe('peanut butter');
  });
})

Be sure to return the promise - if you omit this return statement, your test will complete before fetchData completes.

Conclusion

We have explored the main asynchronous patterns on JavaScript and the ways to test them with Jest.

BEM methodology

SARA-AHMED94 — Thu, 11 Feb 2021 23:17:42 +0000

CSS is a language that is easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable.BEM is an approach for improving CSS structure.

BEM stands for Block Element, Modifiers.

How It Works
A BEM class name includes three parts.

1- Block: The outermost parent element of the component is defined
as the block.
2- Element: Inside of the component may be one or more children
called elements.
3- Modifier: Either a block or element may have a variation
signified by a modifier.

Block
A Block is a component part of a website that can exist in it’s own right. We’re using a product card as our example Block.

Naming : Block names may consist of Latin letters, digits, and dashes. To form a CSS class, add a short prefix for namespacing

Example : .block

Element
An Element is a child aspect of a Block that only exists within that Block. In our product card example, image, title, price and like-button are all examples of Elements within the product card Block.

Naming : Element names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block name plus two underscores plus element name

Example : .block__elem

Modifier
A Modifier can be applied to either a Block or an Element and is used to adjust the default look or behaviour of the Block or Element. With our product card example, the Modifier liked exists and can be applied to both the product card Block and the like-button Element when a product has been liked

Naming : Modifier names may consist of Latin letters, digits, dashes and underscores. CSS class is formed as block’s or element’s name plus two dashes

Example : .block--mod

Overall, I would highly recommend using it on your next project. It may be different than what you’re used to,but I’m convinced you’ll quickly see the benefits it provides on projects both large and small. It will save you So much debugging time in the future. Hopefully, you find this article useful.