使用 Jest 和酶进行 IndexedDB 测试 - ReferenceError: indexedDB 未定义

Question

我正在为我的应用程序寻求单元测试方面的帮助，我正在使用 indexedDB。 在我实现 indexedDB 功能之前，测试是正确的。 但是现在，对于所有这些，我都看到一个错误：

ReferenceError: indexedDB is not defined

有人可以给我建议如何摆脱那个错误吗？ 我正在搜索信息，并尝试使用不同的方法来模拟window或indexedDB ，但没有结果。

Answer 1

此问题是由于 Dexie 期望定义window.indexedDB ，而在没有真正 DOM 或window范围的无头模式（使用 Jest）下运行时，情况并非如此。

在 Dexie git 问题中找到了一个解决方案，它表明：

const Dexie = require('dexie')

Dexie.dependencies.indexedDB = require('fake-indexeddb')
Dexie.dependencies.IDBKeyRange = require('fake-indexeddb/lib/FDBKeyRange')

我们在以下方面也取得了成功：

import Dexie from 'dexie';
import indexedDB from 'fake-indexeddb';

Dexie.dependencies.indexedDB = indexedDB;

原问题链接： https : //github.com/dfahlander/Dexie.js/issues/495

或者根据文档，您可以提供 indexedDB 选项，例如：

import Dexie from 'dexie';
import indexedDB from 'fake-indexeddb';

var db = new Dexie("MyDatabase", { indexedDB: indexedDB });

文档链接： http : //dexie.org/docs/Dexie/Dexie

Answer 2

如果您正在使用 jest 和酶来测试 indexdb，或者您正在使用 dexie 它是一个 indexDB 包装器，它也用于实现 indexDB api，您只需在 global-test.js 文件中添加这三行。

const Dexie = require('dexie');
Dexie.dependencies.indexedDB = require('fake-indexeddb');
Dexie.dependencies.IDBKeyRange = require('fake-indexeddb/lib/FDBKeyRange');

现在您必须将此文件提供给 jest，以表明它可以使用 fake-indexddb 而不是原始 indexDB。

setupFiles: ['<rootDir>/src/test/globals-test.ts']

Answer 3

使用 jest 时，根据fakeindexeddb 文档，安装，

npm install --save-dev fake-indexeddb

或者

yarn add --dev fake-indexeddb

然后将以下代码添加到 jestconfig 文件中

"jest": {
    ...
    "setupFiles": [
        "fake-indexeddb/auto"
    ]
}

Answer 4

我没有使用 Dexie（而是在 Firebase 在导入时抛出异常时到达这里），修复只是将require('fake-indexeddb/auto')到setupTests.ts以供 Jest 使用。

Answer 5

对于带有玩笑的 Angular 7.3+，请将其添加到您的 global-test.ts 文件中：

const Dexie = require('dexie');
Dexie.dependencies.indexedDB = require('fake-indexeddb');
Dexie.dependencies.IDBKeyRange = require('fake-indexeddb/lib/FDBKeyRange');

然后在 jest.config.js 中加载文件：

module.exports = {
    preset: 'jest-preset-angular',
    transformIgnorePatterns: ['node_modules'],
    setupTestFrameworkScriptFile: '<rootDir>/src/setupJest.ts',
    moduleNameMapper: {
        '\\.(jpg|jpeg|png)$': '<rootDir>/__mocks__/image.js',
        '@lib/(.*)': '<rootDir>/src/lib/$1'
    },
    globals: {
        'ts-jest': {
            tsConfigFile: 'src/tsconfig.spec.json'
        },
        __TRANSFORM_HTML__: true
    },
    setupFiles: ['<rootDir>/src/test/globals-test.ts']
};