Preface:

Every time I read a document, the first thing I pay attention to is not the content. When the words “Chinese document” come into my eyes, I must feel relieved. Therefore, when I saw the cover of Jest, I felt a sense of pride that I had chosen the right frame.

Only the tabs and quick Start page are in Chinese.

When I was in high school, the math, physics and chemistry teacher rushed in and confidently said, “If you learn math, physics and chemistry well, you are not afraid to travel around the world.”

Biology teacher closely follow pace, loudly clamor, “did not learn biology, later do not know the child is not you!”

Then arrived is just a few minutes ago accidentally saw the Jest document English teacher, seems to also find the opportunity to exhale, only listen to him clear throat, math and chemistry did not learn, “you at least can go when a front end, if even English learning is not good, hum, I see you later can do what.”

After listening to this, the head teacher immediately showed a decadent and uneasy appearance, with a layer of gray on his face and some words in his mouth, but this time it is all of them, and so on, some don’t understand…

start

I wrote a Stencil writing web-Component the other day. I was going to write a few components and publish them to NPM, but in a responsible manner, and in case anyone else uses them, unit testing is absolutely necessary. Jest was chosen because that’s what stencil documents use. Although its Chinese document is a sheep’s head selling dog’s meat, but the defects do not hide the merits, the functions have, the support of the framework are also supported.

start

NPM init: install jest (test) in package.json (jest).

Next, we’ll write a simple example. We’ll create a sum.js and find the sum of the two numbers. Then, we’ll create a sum.test.js to test the sum we just wrote

Semantically it makes sense to expect sum(1+2) to be 3.

After writing the example, run NPM run test directly and you can see the output on the console:

If you need to see more detailed test information, such as code coverage, you can run Jest –init from the console, and a few configuration options appear for you to choose from.

Jest.config.js will appear in the directory after the selection. Click there to see the configuration. On line 20, set collectCoverage to true

Then re-run the NPM run test

You’ll notice that there’s a table on the output that shows the code coverage of our unit tests,

1. % STMTS statement coverage: is every statement executed
2. %Branch coverage: Is every if block executed
3. %Funcs function coverage: Is every function called
4. %Lines line coverage: is every line executed

The rest of the jest.config.js configuration can be turned on or off by referring to the English comments above.

The main content because jest API is more, but we may commonly used also so a few, just a few examples to illustrate. For me, the general contents that need to be tested can be divided into the following categories:

1. A test of function (pass in arguments, return a value, sum)
2. A test of the processing of data after a callback or asynchronous reading of data
3. A test of an entire class
4. Testing a Web-component written by Stencil
5. Test components within the framework, such as Vue, React

Callback or processing of asynchronous data

1. Callback function

It’s a very simple example, but the correct result is 123, so it’s written as 234, so let’s see what we can expect to see if we don’t agree.

The console will simply enter the failed unit test, tell us what went wrong, change 234 back to 123, and the output will pass.

2. Callback function with timer

Let’s write a small example to run NPM run test directly

You will find that although it passes, the coverage is only 60%, and 3-4 lines of code are not executed. Compared to the code in setTimeout.js, it happens that two lines of the callback function are not executed.

Add an assertion to that except in our callback is not run, jest is not waiting until timeout is complete to execute CB.

Officials offer two ways to do this:

Using the done parameter

The test callback can provide one argument, done. The test function is not finished until done is run

Use jest’s built-in timers

Jes also provides us with a fakeTimer API that allows us to simulate timers. The ability to change the timing of execution using the API.

3. Asynchronous data processing (PROMISE, HTTP)

In unit testing, we might not need to actually fetch data from behind the scenes, but mock data to test and manipulate with. Jest also provides us with the ability to simulate modules by creating a __mock__ folder in the same directory as the referenced module and naming the same JS file to return the actual function content we need.

In the figure, the original HTTP returns 3, while our mock returns 6. User is a file that introduces HTTP to initiate a request. Then run the NPM run test to see the results, and you’ll notice something very strange.

Obviously, our result was wrong, we received 6, but our test passed, the middle section is the node prompt, because we did not add. Catch. Puzzled, the data also checked along while, fortunately, I later abandoned, directly opened a small plane to Go to Google, Baidu is really not found. The problem is not that there is no catch, but that if we use a promise, the callback must return a promise ending with.then.

Alternatively, we can get the same result with await/async, but we can’t test reject.

To test a class, you can create an instance of a class and test its methods or properties. To test whether a new Class instance has been created successfully (i.e., to test whether constructor has been called successfully), we have a detailed example on our website.

Other Jest can also through the use of Jest. CreateMockFromModule to simulate we installed to rely on the module, or a axios a simple example, let’s NPM install axios, then used to simulate the Jest.

Create a new __mocks__ in the parent directory of node_modules, and use an axios.js to emulate the AXIos module, replacing the AXIos get with a function that returns 3. Write test cases and test them,

You can see that the return value of use() is the same 3 that get returns after we modify axios.

Conclusion:

I stumbled through this post, but I was forced to add a (up) to the title. As for (down), I haven’t written it yet, but it’s all about how Jest applies to our framework, starting with Vue, React, and Stencil.

In fact, for me, the painstaking effort of this article is mainly in the preface, which has been changed back and forth for more than 2 hours. Writing articles is my hobby, while writing technical articles is more for study and work. I hope I can integrate my hobby into work and study, at least to make boring technical articles more vivid when reading.

If the article is helpful to you, you can pay attention to my public number, lazy dog small front end