如何使用 Enzyme 和 Jest 在 React 中编写功能测试

Question

我正在研究一个简单的方法，我需要使用 enzyme OR jest 添加测试用例。

const export inputValidation = (phnum,pincode,setvalue) => {
//remove  zipcode message
//remove phnum message
if (phnum?.length < 10 && setvalue) {
//phnum must be 10 digit(error message)
} 
if (pincode?.length < 7 && setvalue) { 
//zipcode must be 7 digit (error message)
}
//just return true or false
}

我从来没有写过功能测试用例，我需要一些帮助。

我试过的测试用例

 describe(validation test case () =>{
it(CHECK IF PHONE NUMBER IS 10 DIGIT ELSE SET SOME MESSAGE ,()=>{
expect(inputValidation (12345678,1235667,true).ToEqual('')
})
})

否则我们可以模拟这个函数并检查每个参数吗？？

我们如何检查每个输入字段是否有限制？？

我可以查看错误消息显示的内容，我想知道如何将其框起来

Answer 1

如果你的函数是纯函数，你不需要mock任何东西，只需要为函数提供输入，让代码执行不同的分支语句，断言return值是否是你的期待。

例如

index.ts:

export const inputValidation = (phnum, pincode, setvalue) => {
  if (phnum?.length < 10 && setvalue) {
    throw new Error('phnum must be 10 digit');
  }
  if (pincode?.length < 7 && setvalue) {
    throw new Error('zipcode must be 7 digit');
  }
  return true;
};

index.test.ts:

import { inputValidation } from './';

describe('68413019', () => {
  test('should throw error if the length of phnum lt 10 digit', () => {
    expect(() => inputValidation('1', 123, true)).toThrowError('phnum must be 10 digit');
  });
  test('should throw error if the length of pincode lt 7 digit', () => {
    expect(() => inputValidation('1234567890', '123', true)).toThrowError('zipcode must be 7 digit');
  });
  test('should return true if input is valid', () => {
    expect(inputValidation('1234567890', '12345678', true)).toBeTruthy();
  });
});

单元测试结果：

 PASS  examples/68413019/index.test.ts (9.085 s)
  68413019
    ✓ should throw error if the length of phnum lt 10 digit (4 ms)
    ✓ should throw error if the length of pincode lt 7 digit
    ✓ should return true if input is valid (1 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |     87.5 |     100 |     100 |                   
 index.ts |     100 |     87.5 |     100 |     100 | 2-5               
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        9.693 s, estimated 10 s
Ran all test suites related to changed files.

如何使用 Enzyme 和 Jest 在 React 中编写功能测试

How to Write Functional Tests in React-using Enzyme and Jest

reactjs

jestjs

enzyme

ts-jest

react-hooks