嘲笑@pnp/ Jest中的日志记录

Question

我在一个Spfx项目里工作。

我有自己的Logger类，它是@pnp/logging/Logger的包装器。

import * as pnpLogging from '@pnp/logging';
export class Logger {
    public static debug(message: string, notify = false, caller: string = null): void {
        pnpLogging.Logger.log( ... )
    }

然后，这个记录器将用于其他各种类、组件和钩子中。

import { Logger } from "./logging";
Logger.debug('some debug message);

当为其他类创建测试时，jest在导入@pnp/日志时抛出一个不受支持的异常。

通过使用它们的公共to库，我能够克服office-ui-fabric-react的这个问题。

"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1",

但是，我看不到@pnp/logging选项。

我也试图嘲弄它，但没有成功。

import { nameof } from './utils';
const mockedPnpLogger = { error: (message) => { } };
jest.mock('@pnp/logging', () => ({
  ...jest.requireActual('@pnp/logging') as any,
  Logger: mockedPnpLogger
}));   
describe('utils', () => { ... }

但这仍然是一个出口错误

SyntaxError: Unexpected token 'export'

  3 | const mockedPnpLogger = { error: (message) => { } };
  4 | jest.mock('@pnp/logging', () => ({
> 5 |     ...jest.requireActual('@pnp/logging') as any,
    |             ^
  6 |     Logger: mockedPnpLogger
  7 | }));
  8 |

我有点不知所措了。谁有洞察力或者能帮我走向正确的方向？

完全错误消息

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

C:\Development\Projects\Skan\Applications\FuhrPark\src\client\node_modules\@pnp\logging\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from "./logger.js";
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

> 1 | import * as pnpLogging from '@pnp/logging';

Jest配置

"jest": {
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
    ],
    "moduleDirectories": [
        "node_modules"
    ],
    "moduleNameMapper": {
        "\\.(css|less|scss|sass)$": "identity-obj-proxy",
        "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1",
        "^@fuhrpark/(.*)": "<rootDir>/src/webparts/fuhrpark/$1",
        "^@shared/(.*)": "<rootDir>/src/shared/$1"
    },
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "transformIgnorePatterns": [
        "node_modules/(?!office-ui-fabric-react)"
    ],
    "testMatch": [
        "**/src/**/*.tests.+(ts|tsx)"
    ],
    "setupFiles": [
        "<rootDir>/src/webparts/fuhrpark/tests/tests-setup.ts"
    ],
    "testEnvironment": "node",
    "collectCoverage": true,
    "coverageReporters": [
        "json",
        "lcov",
        "text",
        "cobertura"
    ],
    "coverageDirectory": "<rootDir>/test-results",
    "reporters": [
        "default",
        "jest-junit"
    ],
    "coverageThreshold": {
        "global": {
            "branches": 0,
            "functions": 0,
            "lines": 0,
            "statements": 0
        }
    }
},
"jest-junit": {
    "output": "./test-results/summary-jest-junit.xml"
}

TypeScript配置

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "strictNullChecks": false,
    "noUnusedLocals": false,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "webpack-env",
      "jest",
      "node"
    ],
    "lib": [
      "es6",
      "dom",
      "es2015.collection",
      "es2015.promise"
    ],
    "baseUrl": "src",
    "paths": {
      "@fuhrpark/*": [
        "webparts/fuhrpark/*"
      ],
      "@shared/*": [
        "shared/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

Answer 1

我在一个函数中将get方法封装在web对象上，最后通过创建下面的模拟来正确地实现它。我的包装器使用的是.then模式，这是模拟中出现双承诺解析的原因。

重要的模拟不能在it /测试或描述中，它必须在顶层，如文档中所述

我还在相同的模拟中模拟了sp.setup函数，否则会抛出一个错误。因此-你需要根据我的发现设置一个双倍。我试过了

jest.mock('@pnp/sp', () => {
    return {
        __esModule: true,
        sp: {
            setup: jest.fn(),
            web: {
                get: () => Promise.resolve(Promise.resolve({ Title: 'Contoso Web Title' }))
            }
        }
    };
});

编辑:添加一个包含"select“的示例--这也必须被嘲弄/存根

jest.mock('@pnp/sp', () => {
    return {
        __esModule: true,
        sp: {
            setup: jest.fn(),
            web: {
                select: () => {
                    return {
                        get: () => Promise.resolve(Promise.resolve({ Title: 'Contoso Web Title' }))
                    };
                }
            }
        }
    };
});