DEV Community: Lucas jin

Mocking Modules in Jest: Three Powerful Techniques

Lucas jin — Tue, 02 Apr 2024 10:58:13 +0000

Jest offers three effective methods to mock modules in your tests, enabling you to isolate and control external dependencies for focused testing. Here's a detailed breakdown of each approach:

Direct Mocking in the Test File (Using jest.mock):

Ideal for mocking specific modules within the context of a single test file.
Syntax:

jest.mock('module-to-mock', () => ({
  // Mock implementation for the module
}));

Example:

import { useSite } from 'src/context/SiteContext'; // Import the mocked module
jest.mock('src/context/SiteContext', () => ({
  useSite: jest.fn(),
}));
const useSiteMockImpelmetation = (market: string) => {
  (useSite as any).mockImplementation(() => {
    return {
      config: {
        market,
      },
    };
  });
};
 it('should show 4 list item if is spanish market', () => {
    mockMarket('es');
    renderComponent();
    const items = screen.getAllByRole('listitem');
    expect(items).toHaveLength(4);
  });

Global Mocking in jest.setup.ts:

Suitable for globally mocking modules across all test files.
Location: Create a file named jest.setup.ts (or .js) in your project's root directory.

Syntax:

jest.mock('module-to-mock', () => ({
  // Mock implementation for the module
}));
Example (in jest.setup.ts):



jest.mock('next-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

Manual Mocking in the __mocks__ Folder: (Manual Mocks · Jest )

Useful when the mocked module has complex logic or requires custom configuration.
Steps:
- Create a directory named mocks within the same directory as the module you want to mock.
- Inside __mocks__, create a file with the same name as the module (including extension). This file will contain your mock implementation.
Example (assuming src/context/SiteContext.tsx is the module to mock):
- Create mocks/src/context/SiteContext.tsx.
- Implement your mock logic in this file.

jest.mock('src/context/SiteContext', () => ({
  useSite: jest.fn(() => ({ 
    config: {
      market:'us'
      }
  })),
}));

Then in the test file, we can use it:

jest.mock('src/context/SiteConfigContext');

The useSite mock will automatically have the mock value that defined in the __mocks__/src/context/SiteContext.tsx file

Props and cons:

Method	Pros	Cons
Direct Mocking (`jest.mock` in Test File)	Targeted: Mocks apply only to a specific test file. - Simple: Easy to set up for basic mocking needs. - Clear: Mock behavior stays within the test case.	Limited Scope: Mocks are not shared across other tests. - Repetition: May lead to code duplication if mocking the same module in multiple tests.
Global Mocking (jest.setup.ts)	Consistency: Mocks are applied consistently across all tests. - Convenience: No need to repeat mock definitions for each test.	Global Impact: Accidental side effects in mocks can affect all tests. - Less Control: Less granular control over mock behavior compared to direct mocking.
Manual Mocking (mocks Folder)	Flexibility: Suitable for complex mocking logic or custom configurations. - Organization: Keeps mock code separate for better maintainability.	Setup: Requires creating a dedicated folder structure. - Potential Issues: May be harder to debug if mock logic becomes intricate.

Choosing the Right Method:

For basic mocks within a single test: Direct mocking with jest.mock is straightforward and keeps code focused.
For consistent global mocking: Use jest.setup.ts when you need the same mock behavior across all tests.
For complex or reusable mock logic: Manual mocking with the mocks folder offers flexibility and organization.
We always can use jest.mock('path') to unmock the mock file

Typescript generic type - basic concept

Lucas jin — Mon, 25 Apr 2022 09:38:50 +0000

If it's your first time working with a Typescript project, the generic type can be intimidating. It's already complicated dealing with all other normal types, the generic type makes it look like we are working with another different language rather than Javascript.

How to declare a type with a defined type value

To talk about the generic type, let's see an example of how to declare a type with a defined type value in Typescript:

type A = number[]

interface AB {
  a: A
  b: string
}

We have declared a type A, which is an array of numbers, and an interface B, which has properties a and b. It's quite simple and clear, right?

But now if we want another type, which will be an array of strings and another interface that will contain this type, what should we do? Of course, we can simply create another type

type C = string[]

interface CD {
  c: C 
  d: string
}

How to declare a generic type

But don't you remember one of the principles of software development is "Don't repeat yourself"? In this case Typescript generic type comes to the rescue. The purpose of the generic type is to create reusable types, does it sound familiar, you may have heard that the functions are used to create reusable code as well. It turns out they are quite similar. Let's see how to create a generic type:

type A<T> = T[]

interface AB<T> {
  a: A<T>
  b: string
}

You see, the difference between the normal type and the generic type is that the generic type has an angle bracket. And also when we declare a type like this type A = number[] we know the type is an array of numbers, but we don't know what type is yet when we declare the generic type. That's why it's called generic type, because it can be any type.

As I said before, the generic type and the function are very similar. You can think this way: here we declared a type A, and we pass a parameter T to it, then we return a type of array of T. So when we use the generic type, we have to pass an argument to it:

type A<T> = T[]

const a:A<number> = [1, 2, 3] // Correct.

const a:A<string> = ['1', '2', '3'] // Correct.

const a:A<number | string> = ['1','2', 3] //Correct

const a:A<number> = ['1','2','3'] //Error. Type 'string' is not assignable to type 'number'

const ab:AB<number> = {
  a:[1, 2, 3], // Correct
  b:'b'
}

const ab:AB<string> = {
  a:['1', '2', '3'], // Correct
  b:'b'
}

const ab:AB<number> = {
  a:['1','2','3'], // Error. Type 'string' is not assignable to type 'number'.
  b:'b'
}

In this way, we can create any type we want, as long as they share the same structure. You can often see that people use T, U, and K as the generic type parameter, but you really can name it whatever you want, maybe a semantic word is a good idea.

Declare generic type with default type

Like functions, we also can pass a default type to the generic type, in case we don't pass any type to it, it will be set to the default type.

type A<T = string> = T[]

interface AB<T = number> {
  a: A<T>
  b: string
}


const a: A = ['1','2','3'] // Correct

const a: A = [ 1, 2, 3] // Error. Type 'number' is not assignable to type 'string'.

const ab: AB = {
  a:[ 1, 2, 3], // Correct
  b:'b'
}

const ab: AB = {
  a:[ '1', '2', '3'], // Error. Type 'string' is not assignable to type 'number'.
  b:'b'
}

Use more than one parameter

In the above examples, we see how to create a generic type with a single parameter, but the truth is you can use as many parameters as you want, just like functions.

interface AB<T,U> {
  a: T[]
  b: U
}

const ab:AB<number, string> = {
  a: [1,2,3],
  b: '123'
} // Correct

const ab:AB<number, string> = {
  a: ['1','2','3'], // Error. Type 'string' is not assignable to type 'number'.
  b: 123 // Error. Type 'number' is not assignable to type 'string'.
}

Also, you can combine the default type with several parameters, but there is one condition that the optional type parameters can't be added before the required parameters:

interface AB<T = number, U = string> { // Correct.
  a: T[]
  b: U
}

interface AB<T, U = string> { // Correct.
  a: T[]
  b: U
}

interface AB<T = number ,U> { // Error. Required type parameters may not follow optional type parameters.
  a: T[]
  b: U
}

What you need to know about Typescript types

Lucas jin — Mon, 11 Apr 2022 10:11:44 +0000

When we are talking about types in typescript, what is the first thing that comes to your mind? You may think:

number (1,2,3)
string ('hello',''world')
boolean (true, false)
object ({name:'Jon',age:'30'})
function ((x,y)=> x + y)
undefined
null

Yes, these are some possible types in Typescript system. Before you run the code, typescript uses them to check for errors.

A variable can just have one type... wow! stop there! you may start to argue with me now: "typescript has union type and also intersection type which a variable can be assigned to several types! You are wrong Lucas!" Yes, you are right about union and intersection type, but this is just one way to think of the types, and I prefer to think of the types in typescript as a set of possible values. For instance, a number type is a set of all number values. 2, 45, 1000 belongs to it, but 'book', 'student' not. And depends on the strictNullChecks setting, null and undefined may or may not be part of the set. (If the strictNullChecks is turned off, null and undefined are permissible values in every type.)

Type Alias

The smallest type set is an empty set, which is an empty domain, no value can be found in it. It's also known as Never type in typescript, no values are assignable to a never type:

const A:never = 'a' // Error. Type 'string' is not assignable to type 'never'.

The next smallest type set contains a single value. There is only one single value that can be found in this domain, which
corresponds to typescript literal type, also known as unit type :

type A = 'a'
type B = 'b'
type One = 1

const category:A = 'a' // Correct
const category:A = 'b' // Error, Type '"b"' is not assignable to type '"a"'.

And to form two or three values, you can use union unit types, which corresponds to typescript union type:

type AB = 'a' | 'b'
const A: AB = 'a' // Correct
const B: AB = 'b' // Correct
const C: AB = 'c' // Type '"c"' is not assignable to type 'AB'.

The values in these sets of values or domains are finite, it's quite easy to reason with. But most of time the domain we are dealing with is infinite, such as string, number or an interface, yet we still can think of them as a set of values:

type num = 1 | 2 | 3 | 4 | ... 
type str = 'apple' | 'banana' | 'book' | ...

The number type is the set of values of all the numbers in the universe, and the string type is the set of values of all the strings in the universe.

What does assignable mean?

How can this mindset help us understand better the Typescript's type system? I don't know if you ever encountered a situation when Typescript jumps out an error and it says: Type A is not assignable to type B , and I am like: What? the type A definitely can assign to type B. This misunderstanding is because I didn't fully understand what typescript was trying to tell me. Here is a simple example:

type Fruit = 'apple' | 'banana'
const log = (str:Fruit) =>  {
    console.log(str)
}

let myFruit = 'apple'

log(myFruit) // Error. Argument of type 'string' is not assignable to parameter of type 'Fruit'.

First of all, you may ask why a string is not assignable to type 'Fruit' which is also a string, 'apple' or 'banana'. The word 'assignable' appears in many Typescript errors, in the context of set of values, it means either 'member of' or 'subset of'. So now we can translate the error message to Argument of type 'string' is not a member of (subset of) parameter of type 'Fruit'. If you are still asking is string a subset of type 'Fruit' or is type 'Fruit' a subset of string? You should think of types as a set of values. In the domain of string type contains infinite string values, on the other hand the type 'Fruit' only contains two values, 'apple' and 'banana'. So clearly type 'Fruit' is a subset of string, or string is the superset of type 'Fruit'. Now the error message makes sense to us, of course the string is not assignable to type 'Fruit'.

To fix the error is simple, we just change the keyword let to const , so Typescript will know the value 'apple' won't change in the future.

Interface

Now let's take a look at the Typescript interface. Let's say we have two interfaces

interface AB {
  a:string
  b: string
}

interface ABC {
  a:string
  b: string
  c: string
}

Now my question is which interface is a subset of (a member of ) or assignable to another? You may immediately think: "interface AB is a subset of interface ABC, because inside interface ABC contains more values." But it's quite the opposite in this case, the correct answer is interface ABC is a subset of interface AB. That's because Javascript is inherently duck typed. And Typescript models this behavior. It means values with additional properties still belong to a type:

interface Person {
  name:string  
}

const person = {
  name:'aa',
  age:21,
  eyeColor:'blue'
}

const personA:Person = person // Correct

You also can verify it by creating an interface Union type:

interface Person {
  name:string  
}

interface ExtraInfo {
  job: string
  habit:string
  favouriteBook:string
}

type PersonInfo = Person | ExtraInfo

const personaB:PersonInfo = {
  name:'joe',
  job: 'developer',
  habit:'read',
  favouriteBook:'book'
} // Correct

As we know, & operator in Typescript computes the intersection of two types. Interface Person and ExtraInfo don't have common properties, but cause the duck typed behavior, values with additional properties still belong to a type So the interface Union type will include all the properties in each interface. And you may surprisingly find an empty interface {} is the super set of all other interfaces, because it means it includes all the possible values.
Back to our first question, I hope you have a clear idea now why the interface ABC is the subset of interface AB.

CSS Drawing Tips

Lucas jin — Thu, 18 Nov 2021 09:51:33 +0000

Have you heard of cssBattle? It's a website that provides some simple shape drawings, where the user should use minimal css code to recreate it. Recently I have completed all 80 drawings, and I think I can share some css drawing techniques here. Learning these techniques may not be very helpful for your daily coding work life, but you may at least find some fun in css.

First things first, here are some techniques that I often used during these 80 challenges:

When I open a new challenge, before starting to write any css, first of all I analyse the original drawing, let's take this challenge No.52 as an example. As I am looking at this, I can tell that there are only two shapes in this drawing, which is a circle and a rectangle, I am then thinking that do these shapes have the same angle and equal proportion, because we can only increase or decrease the size by using box-shadow and we can't change the box-shadow’s angle individually. And yes, the circle's angle doesn't really matter, and all the rectangles have the same angle and the same size. So in this case I can easily use box-shadow to recreate the shapes.

Let's try it.

From the code example above, you can see that I only use one div to create all the circles using the css box-shadow property. And for the rectangle we can do the same, first we create a rectangle as our base, from which we recreate the other rectangles using box-shadow.

And that's it, we have completed our challenge. I use pseudo class :before here just because I don't want to write another div tag in the html, but you can use another html tag to create the rectangle.

Let's see another example using box-shadow and -webkit-box-reflect to help us save writing more code.

This is challenge No.45 from css drawing:

The same as the previous example, as I am looking at this drawing, I can tell that it's formed by some rectangles. But because they have two different angles, vertical and horizontal, I have to use two shapes to create them. And also the left and right side is symmetrical, so I only need to create half the drawing, then use -webkit-box-reflect property to create the other half. So first I created the horizontal ones using box-shadow:

Then I added the vertical ones:

And you can see that half of the drawing is done, now I only need to add



-webkit-box-reflect:right -20px

Voilà, the challenge is done.

Here is another example that I use the exact same technique to create the drawing (challenge No.66), but in this case you have to focus on the negative space:

Let's take another two examples to see how to create shapes with css background property

Challenge No.6

Challenge No.30

As you can see, css background is a really powerful tool, it can create circles and rectangles at the same time and with different sizes. The only gotcha that we should keep in mind when we use background is that the background property is specified as one or more background layers, separated by commas. And the following layer will be positioned below the previous layer.

So in challenge No.6 I first drew the background with a transparent circle in it, then I drew the color wheel in the second layer, so we can see the conic-gradient as a circle in the center. If you mess up with the background layer, you will probably only see the conic-gradient layer take the whole screen, but not the background color nor the circle shape.

Here is another example that I used background layer to complete the challenge:

Challenge No.33

So box-shadow and background are the two most useful properties that I find to help me create the drawings during the challenge. As for the other properties, they are straightforward to use, so I won't explain them with more details here.

CSS Selector’s priority

Lucas jin — Tue, 02 Nov 2021 08:26:24 +0000

Almost all the CSS style conflicts and style overrides have to do with the css selector's priority. In this article I will talk about how the css selector's priority works.

CSS selectors have a strict hierarchy. I have divided them into 6 levels (from 0 to 5).

Level 0 :

Universal selector *

* { color: #000 }

CSS combinators, such as adjacent sibling selector +, child selector >, general sibling selector ~, descendant selector space

div + div { padding: 8px; }
div > p { text-decoration: underline; }
p ~ p { margin-bottom: 8px; }
header h1 { font-size: 18px; }

Logic pseudo-class, such as :not(), :is(), :where() , these logic pseudo classes won't affect the priority, what will affect the priority is the selectors that pass to the pseudo-class function. Pay attention that here I only list the logic pseudo class, not including the other non-logic pseudo class, such as :hover, :first-child etc.

p:not(.text) { color: red; }
div:is(li) {font-size: 8px; }
main:where(h1, h2, h3) { color: orange; }

Level 1:

Type selector, such as p div header span

header { color: #fff }
p { background: red }

Level 2:

Class selector .className

.text { color: red }

attribute selector [attribute]

[data-text] { color: blue }

pseudo class such as :hover :link

:hover { color: green }

pseudo-element such as :first-child:

:first-child {margin-left: 8px}

Level 3

ID selector #id

#text { color: #fff }

Level 4

Inline style in html tag:

<p style= "color:#000" >some text<p/>

Level 5

The key word !important

.text { color: #fff !important }

The key word !important has the highest priority, usually it’s used to override the javascript style, otherwise I don’t recommend using it, it will be difficult to maintain the code if we abuse the !important key word.

We can see that from 0 to 3 level is all about css selectors’ priority, it’s also the most important part. If we can fully understand it , it will be much easier for us to override the style using css selector.

Although now we know all the css selectors’ priority, it’s still very abstract for us to compare them when there are multiple selectors together. You may ask, how can we compare div .foo[bar] { color:#fff } with body > div p.foo { color: #000 } ?

Don’t worry, I’ll also explain how to calculate the css selectors’ priority with actual values. Let’s say if you encounter one level 0 priority selector, then you add 0 value to the total priority , if you encounter one level 1 priority selector, then you add 1 value to the total priority, if you encounter one level 2 priority selector, then you add 10 value to the total priority, and finally if you encounter one level 3 priority selector, you add 100 value to the total priority. In summary:

Level 0: +0
Level 1: +1
Level 2: +10
Level 3: +100

Let’s see some examples:

* > div {} : 1 general selector (level 0), 1 css combinator (level 0), 1 type selector (level 1), so the total value is 0 + 0 + 1 = 1
div > p .text:not(.content): 2 type selector (level 1), 1 css combinator (level 0), 2 class selector (level 2), 1 logic pseudo-class (level 0), so the total value is 2 * 1 + 0 + 2 * 10 + 0 = 22
p[content="story"]: 1 type selector (level 1), 1 attribute selector (level 2), so the total value is 1+ 10 = 11
#list > ol: 1 id selector (level 3), 1 css combinator (level 0), 1 type selector (level 1), so the total value is 100 + 0 + 1 = 101

That’s how you calculate the priority value in css. Now you may ask what if I add 11 type selector, then the value is 11, so can it override one class selector, which has a value 10 ? The truth is the value here is only symbolic, I use 1, 10 ,100 here because no one will really use 10 selectors in the code, and the real fact is that the lower priority level selector can’t ever override the higher priority level. So even if you have 100 type selectors, you can’t override even one class selector.

If you happen to write 2 sets of selectors to target one element, and they have the same priority value, then the subsequent selectors will override the previous one. That’s how css is rendered in the web.

And that’s all you have to know about the css selectors’ priority.