Work notes - some problems encountered when using jest

Hello everyone , I meet you again , I'm your friend, Quan Jun .

　　 Recently, the company wants to start from mocha+karma The front-end unit test mode of is converted to Jest, Then the task was assigned to me , ok , Before that, I didn't even know what unit tests were . I started to write unit tests , The original intention of writing this article is to configure Jest There are many problems in the process , Baidu can hardly search , But my English is too poor , But I have to read English documents . then , Want to write an article , Record some of the problems encountered and how to solve them , Of course , There are still many unsolved problems , Wait until it's solved before updating …orz.

One ,QUICK START Problems encountered in

First , By a command we are particularly familiar with , Oh, yes. , If you install node,git. And global installation vue-cli, I'll post the version later , There's not much nonsense here . We go through vue init webpack <yourname> Command to build the initialized project . But in choice , We have to choose Jest To do unit tests .

　　 So we get an initialization , Have Jest Unit test project . The version information is as follows ：

　　 So let's try , see package.json, We found that the command to start the unit test is npm run unit. Ah ？ How to report a mistake ？ Um. .. Your error message should probably look like the following ：

　　 This is what we are using Jest The first problem I encountered , The solution is simple , stay test In the catalog jest.config.js Add a... To the configuration of ：

　　 then , Try again npm run unit, We found that the test passed . thus , The most basic project configuration has been completed and run smoothly .

　　 Let's move on .

Two 、 adopt script The problem that the plug-in introduced by the tag cannot find .

Let's imagine this scenario first , We need to introduce a plug-in in development , For example, baidu map API Well , But it doesn't work npm install To install （ because npm The warehouse doesn't have this warehouse ）, So we are index.html of use script The tag introduces BMap. Just like this. ：

　　 Next we will use it in our project , It's simple , We are directly in the initialization project HelloWorld.vue Medium mounted Inside the hook console.log(BMap) once , In the console we can see an object , So let's test it ？

　　 Sure enough, the report was wrong ,BMap is not defined.

　　 In the test environment , We use jest We also need to introduce various plug-ins in the development environment , Form an independent environmental system , Of course , We can also fake data by other means . We'll talk about that later , Since we can't find BMap, So what to do ？

　　jest One of the configurations in is globals Configuration item , Can we do something about it ?

　　 First, in the jest.conf.js in , We can do it in globals Add a configuration item named BMap The object of , Just like this. ：

　　 Run the test again , We found that we had run through . But there may be another problem , If you are in the vue Use a variable to temporarily store a Baidu map in the method may also appear “ Can't find BMap.xxx” Such a mistake . So actually , The solution is simple , to BMap Write a corresponding method under the object . such as ：

　　 Just like this. , In fact, it's for jest The global environment mount the corresponding object . however , I think this method is a little more ingenious . It's not a particularly good way to deal with it , For example, I used dozens of methods to write dozens of fake constructors ？ But there is no better way . This kind of treatment is relatively easy to understand .

　　 Last , If we want to give vue The single file component of （ Usually we use scaffolding to build projects like this ）, It also needs to be installed Vue Test Utils Plugins help us write test cases quickly .

　　 Actually in the process of using , There are mainly two kinds of problems , One is the problem of environment configuration , Remember to write jest When testing a use case , You need to import dependent files , As in the main.js In the . The other one is the specific syntax and other problems encountered when writing actual and specific test cases . such as vue-router,vuex,axios How to use it is easy to solve , On the Internet, you can easily find out how to use it , I will not write again .jest Official website and Vue Test Utils In fact, it's quite clear .

2019-03-22 to update ：

　　 I thought I was using it globals After configuring items, you can properly solve the problem of introducing global environment variables , However, in the subsequent process of writing unit tests, there will be inexplicable situations , Occasionally, I still can't find it in the global environment BMap.

3、 ... and 、filecorverage Errors not covered , Although this kind of error reporting will not affect the files of unit tests you have completed , But it will have a certain impact on the coverage , It's not settled yet .

Four 、 In a complex environment, we often encounter the situation that various objects cannot be found , Should be jest The configuration of the test environment , It's not settled yet .

Last , This article is a record of some problems encountered in the work , For reference . If there is not enough error , I hope you will correct me , learn from each other .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/124402.html Link to the original text ：https://javaforall.cn