preface

The front end is no longer a simple cut diagram, web front-end engineers are also gradually out of the arena. The era of the big front end has long come, and we have to keep learning and lighting skill points one by one in the face of ever-changing technology.

Unit testing is now ubiquitous, found in mainstream frameworks and UI components, and the advantages of unit testing are self-evident. This series of articles will take you through the jEST framework for front-end automation testing, including basic configuration, JEST matterers, asynchronous code testing, hook functions, mocks, and practical applications in vUE projects. If you want to continue with this series, please follow me and I will continue to write full jEST tutorials

Why jEST?

  • Zero configuration: It can be implemented out of the box in most projects without configuration
  • Fast: Tests based on changes to files, not all instances at a time
  • Snapshot function: Provides quick and simple tests
  • Good isolation: Different test file environments are independent and do not affect each other
  • The API is simple
  • The mock rich
  • , etc.

Basic Installation and Configuration

  1. Creating a Demo Folder
  2. Enter the folder to runnpm initInitialize a package.json file
  3. Install the jestnpm install --save-dev jest
  4. Create two new files in the Demo folderindex.js index.test.js
  5. inindex.jsWrite code to
function sum(a, b) {
  return a + b
}

module.exports = sum
Copy the code

Effect:

  1. inindex.test.jsTo write the code (don’t understand, will be covered later)
const sum = require('./index')

test('test sum', () => {
  expect(sum(1, 2)).toBe(3)
})
Copy the code

Effect:

  1. inpackage.jsonAdd the following command to script in

Effect:

The last runnpm run testIf the following information is displayed, the basic configuration is complete

I don’t know if you noticed that the above module export and import are using commonJS specifications, and there is no problem in the Node environment, but in the actual development of our code is running on the browser side. So we need to convert it into an ES6 module method that the browser can recognize. Jest itself is a module method that does not support ES6. We can use Babel to do this

Use Babel to enable JEST to support ES6 module imports and exports

  1. Install the Babel modulenpm install --save-dev @babel/core @babel/preset-env
  2. Create a new one in the Demo folder.babelrcAnd write the following code
{
  "presets":[
    ["@babel/preset-env", {
      "targets": {
        "node": "current"}}}]]Copy the code

This Babel configuration means that the syntax is automatically converted to commonJS based on the current Node environment

Note: When you run NPM Run jest, there is a babel-jest module inside Jest that checks for the presence of Babel, loads the Babel configuration file, and then tests the code transformed by Babel

  1. willindex.jsandindex.test.jsIn the import and export module code rewrite into ES6 syntax

The effect picture after the change:

  1. runnpm run test, you can see the test success prompt

So far, we have completed the jEST runtime environment set up, and successfully support es6 module syntax, the following tutorial is basically based on the demo directory structure, some API explanation, you can save the file for later tutorial practice

In the next section, I’ll introduce the code we wrote above and focus on the matchers part of JEST. There are many matchers in JEST. I’ll only introduce some matchers that are commonly used in projects.

My ability is limited, the article may have incorrect or inappropriate parts, I hope you can point out

Pay attention to the public number, and I learn the front-end necessary skills, front-end automation test JEST