Jest

问题记录背景：通过 Jest 和 React Testing Library 对 React Native 做自动化测试问题： 代码中呈现 AppState 的应用 import { AppState } from 'react-native';AppState.removeEventListener('change', handleAppStateChange);报错：TypeError: import_react_native.AppState.removeEventListener is not a function jest.config.js 配置应用了 React Native 预设 module.exports = { preset: 'react-native', ...通过排查发现是因为 React Native 提供的 jest mock 文件缺失局部办法 门路：*/react-native/jest/setup.js .mock('react-native/Libraries/AppState/AppState', () => ({ addEventListener: jest.fn(() => ({ remove: jest.fn(), })), }))解决方案：我的项目长期计划是将 packages/react-native/jest/setup.js 拷贝下来，减少 react-native/Libraries/AppState/AppState 模块的 removeEventListener 和 currentState办法的mock .mock('react-native/Libraries/AppState/AppState', () => ({ addEventListener: jest.fn(() => ({ remove: jest.fn(), })), removeEventListener: jest.fn(), currentState: jest.fn(), }))而后放在我的项目仓库中在 jest.setup.js 文件头部引入 ...

Jest 是当下最支流的前端测试框架首先初始化ts环境 yarn add typescript --devnpx tsc --init第二步:装置ts下的jestyarn add jest @types/jest --dev 第三步:新建tests文件夹tests/index.spec.ts it('init',()=>{ expect(true).toBe(true)})此处记住要在tsconfig.json外面批改配置 "types": ["jest"], 第四步package.json增加 "scripts": { "test":"jest" },执行npm run test失去 接下来解决导入模块的问题index.ts export function add (a,b){ return a+b}index.spec.ts import { add } from "../index"it('init',()=>{ expect(add(2,3)).toBe(5)})执行npm run test报错 关上https://www.jestjs.cn/docs/getting-started配置 Babel npm install --save-dev babel-jest @babel/core @babel/preset-env在我的项目的根目录下创立 babel.config.js ，通过配置 Babel 使其可能兼容以后的 Node 版本。 babel.config.jsmodule.exports = { presets: [['@babel/preset-env', {targets: {node: 'current'}}]],};应用 Typescript通过 babel 来反对 Typescript通过 Babel，Jest 可能反对 Typescript。首先要确保你遵循了上述 应用 Babel 指引。接下来装置 @babel/preset-typescript 插件： ...

根底应用装置jestyarn add jest -D配置package.json{ "scripts": { "test": "jest" }, "devDependencies": { "jest": "^27.5.1" }}测试代码// sum.jsmodule.exports = function sum(a, b) { return a + b;};// sum.spec.jsconst sum = require("./sum");test("sum", () => { expect(sum(1, 1)).toBe(2);});测试yarn test没有问题 配置反对esmodule未做任何配置，间接将导入导出改为esmodule将会呈现这样的谬误 官网文档 只须要在package.json中一点配置即可反对esmodule { "license": "ISC", "type": "module", "scripts": { "test": "NODE_OPTIONS=--experimental-vm-modules jest" }, "devDependencies": { "jest": "^27.5.1" }}容许测试胜利，不过会有一个提醒说VM Modules是一个试验个性 配置反对ts除了jest须要装置@types/jest ts-jest typescript这三个包 yarn add ts-jest @types/jest typescript -D配置文件jest.config.jsmodule.exports = { preset: "ts-jest", testEnvironment: "node",};配置tsconfig.json没有esModuleInterop属性会又一些提醒，也能跑，package外面失常写"test": "jest"就行 ...

在写测试的时候，如果你须要对大量的数据进行 compare 解决的时候，你大概率不会把所有须要比照的对象都列出来，而是抉择间接循环解决。 在测试中如果有循环解决的时候，很有可能会呈现的一个问题是你可能无奈在测试无奈通过时疾速定位道具体是循环中的哪一个元素呈现的问题。这个时候的定位就会比拟麻烦。 一个比拟好的方法是，能够在 Jest 中退出 try/catch 中来处理错误，这样能够在呈现谬误的时候，打印一些辅助信息来疾速定位，比方 it('test-error-catch-example',() => { let needTestData = [1,2,3,4] needTestData.foreach( item => { let result = doSomething(item) // 这里开始是新增的 try{ expect(result).toBe(true) }catch(e){ console.log("error key",item) throw e; } // 新增的错误处理完结 })})通过增加一个自定义的 try catch ，能够在呈现问题的时候，一方面将 Error 依照惯例的形式抛出，期待 Jest 解决，另一方面，能够在 catch 时输入自定义的信息，不便咱们进行排查和修复。

副标题：SAP Spartacus SSR 优化的单元测试剖析之二 - 调用参数检测源代码： it(`should pass parameters to the original engine instance`, () => { expect(originalEngineInstance).toHaveBeenCalledWith( mockPath, mockOptions, mockCallback ); }); 留神察看 jest.Expect 的返回值：类型为 jest.JestMatchersShape 单步调试 expect 的调用过程： 从正文看，该函数为 spec 创立一个 expectation, 传入的 actual 为 spy 之后的版本。 结构一个 expectation，须要以上的参数。 紧接着调用 toHaveBeenCalledWith: 反对的所有办法，在 Chrome 开发者工具里可能看到： toHaveBeenCalledWith 执行到这里来了： 所有可用的匹配器 matchers，都定义在文件 jasmine.js 里： 因而，toHaveBeenCalledWith 也算匹配器 matchers 之一。 结构一个匹配器实例： 调用匹配器工厂，结构一个匹配器实例： 其实例的运行代码如下图所示： ...

副标题：SAP Spartacus SSR 优化的单元测试剖析之一 : beforeEach 文档 SAP Spartacus 里这段代码： originalEngine = jasmine .createSpy('ngExpressEngine') .and.callFake(() => originalEngineInstance);该办法承受一个字符串作为创立的 Spy 的名称，返回一个新的 Spy 对象。 这个新创建的 spy 对象，还是位于 jasmine namespace 之下。 spy.and: 返回 SpyStrategy 实例： 接下来，咱们就能够通过这个 spy 对象的 strategy 办法，指派这个 spy 去做一些事件了。 callFake：callFake(fn) Tell the spy to call a fake implementation when invoked.单步调试 createSpy 办法： 转交给 env： 在 jasmine 外部，新建 strategy dispatcher 和 callTracker： wrapper 的 and 属性，来自 strategy dispatcher 的 and 属性： ...

Jest Tutorial for Beginners: Getting Started With JavaScript Testing Jest 是一个 JavaScript 测试运行器，即用于创立、运行和构建测试的 JavaScript 库。 Jest 作为 NPM 包公布，您能够将其装置在任何 JavaScript 我的项目中。 Jest 是当今最风行的测试运行器之一，也是 React 我的项目的默认抉择。 Setting up the project与每个 JavaScript 我的项目一样，您须要一个 NPM 环境（确保在您的零碎上装置了 Node）。 创立一个新文件夹并应用以下命令初始化我的项目： mkdir getting-started-with-jest && cd $_npm init -y接着： npm i jest --save-dev让咱们也配置一个 NPM 脚本来从命令行运行咱们的测试。 关上 package.json 并配置一个名为 test 的脚本来运行 Jest： "scripts": { "test": "jest" },Specifications and test-driven development作为开发人员，咱们都喜爱创意自在。 然而，在大多数状况下，当波及到庄重的事件时，您没有那么多特权。 咱们必须遵循标准，即对要构建的内容的书面或口头形容。 在本教程中，咱们从项目经理那里失去了一个相当简略的标准。 一个超级重要的客户端须要一个 JavaScript 函数来过滤一个对象数组。 ...

其实就是一个同步代码执行的程序顺便触发了对应的钩子函数； beforeAll(() => console.log('1 - beforeAll'));afterAll(() => console.log('1 - afterAll'));beforeEach(() => console.log('1 - beforeEach'));afterEach(() => console.log('1 - afterEach'));test('', () => console.log('1 - test'));describe('Scoped / Nested block', () => { beforeAll(() => console.log('2 - beforeAll')); afterAll(() => console.log('2 - afterAll')); beforeEach(() => console.log('2 - beforeEach')); afterEach(() => console.log('2 - afterEach')); test('', () => console.log('2 - test'));});// 1 - beforeAll// 1 - beforeEach// 1 - test// 1 - afterEach// 2 - beforeAll// 1 - beforeEach// 2 - beforeEach// 2 - test// 2 - afterEach// 1 - afterEach// 2 - afterAll// 1 - afterAll

前言GrowingIO Design 是用 React 编写的组件库，实质上就是 React 组件，你能够用像测试其余 JavaScript 代码相似的形式测试 React 组件。当初有许多种测试 React 组件的办法。大体上能够被分为两类： 渲染组件树：在一个简化的测试环境中渲染组件树并对它们的输入做断言查看。运行残缺利用：在一个实在的浏览器环境中运行整个利用。咱们对于第一类称之为单元测试，本文次要专一于这种状况的测试策略；第二类称为端到端（end-to-end）测试，残缺的端到端测试在避免对重要工作流的屡次回归方面很有价值，对于组件的端到端测试会有专门一篇文章来介绍。 工具调研对于测试工具的抉择，次要从 2020 年的 State of JavaScript Survey 中列出的工具筛选。咱们先从“应用度”和“满意度”两个角度来看测试生态圈的比拟常用工具。 测试工具应用度比照 测试工具满意度比照 Jest、Storybook 在“应用度”和“满意度”上都取得了比拟高的分数，新进入的 Testing Library 在“满意度”上也取得了高分。 注： 满意度：会再次应用 / (会再次应用 + 不会再次应用) 应用度：(将再次应用 + 将不再应用) / 总计除了以上的几款工具，看看其余工具的用户百分比： 工具抉择先看看 React 官方网站（目前最新版本 v17.0.2）举荐的工具： Jest 是一个 JavaScript 测试运行器。它容许你应用 jsdom 操作 DOM 。只管 jsdom 只是对浏览器工作体现的一个近似模仿，对测试 React 组件来说它通常也曾经够用了。Jest 有着非常优良的迭代速度，同时还提供了若干弱小的性能，比方它能够模仿 modules 和 timers 让你更精密的控制代码如何执行。React Testing Library（简称：RTL）是一组能让你不依赖 React 组件具体实现对他们进行测试的辅助工具。它让重构工作变得轻而易举，还会推动你拥抱无关无障碍的最佳实际。尽管它不能让你省略子元素来浅（shallowly）渲染一个组件，但像 Jest 这样的测试运行器能够通过 mocking 让你做到。实际上在 v16.7.0 版本的网站上，他们还举荐了另一个工具： ...