在开玩笑中嘲笑（打字稿 - 模拟铬命名空间）

Question

我有一个 chrome ground 。 我开始添加一些测试，但是我在一些测试方面很难。

我想测试我的 ＆lt; app/＆gt; component ，但是我以任何方式都会遇到错误。

通过这样做：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import App from "../../App";
import { BMEUtils } from "../../app/helpers/utils/BMEUtils";
import { FormContainerID } from "../../app/dom-elements/_components/forms/AbsoluteContainer";
import renderer from 'react-test-renderer';


describe("tests ", () => {

  it("test App", () => {
    const component = renderer.create(
      <App />,
    );
    const b = document.getElementById(FormContainerID)
    const a =  document.getElementById("login-btn");
    
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
    
    expect(a).not.toBeNull();
    expect(b).not.toBeNull();
   
  });
});

我在测试过程中会遇到错误

ReferenceError: chrome is not defined

，因为其中一个组件调用此名称空间添加侦听器（chrome.runtime.onmessage.Addlistener），

我尝试过：

global.chrome = jest.fn() as any;
jest.mock('chrome');

import chrome from "sinon-chrome";
 beforeAll(function () {
    global.chrome = chrome as any;
 });

const chrome = require('sinon-chrome/extensions');
beforeAll(function () {
    global.chrome = chrome ;
});

var globalRef:any =global;
globalRef.chrome = jest.fn().mockImplementation();
const component = renderer.create(
   <App />,
);

import { mount } from 'enzyme';
const wrapper = mount(
   <App/>
);
const p = wrapper.find('#login-btn');

，但没有一个为我工作。

这是我的主要问题。

我遇到的其他问题，也可能与以前有关的问题是，我不知道如何模拟我正在调用的方法中执行的某些函数的实现，而不是模块。

例如，

// Test as Base64 Image
// Utils is a namespace
test('base64Image', () => {
  ...
  const file = ...;
  let base64Image = Utils.asBase64Image(file);
  expect(base64Image).not.toEqual("");
  ...
});

function asBase64Image(file:File) {
  ...
  canvas.getContext("2d");
  img.onload
  ...
}

我想出的解决方法是使用模块替换这些功能并模拟它们，例如，而不是img.onload - ＆gt; Module.LoadImage（IMG）。然后（...） 但是，如果可能的话，我想学习正确的方法。

无论如何，我现在真正的问题是我无法测试我的＆lt; app/＆gt;组件。

Answer 1

对于仍在2023年仍在挣扎的任何人，我通过以下方面解决：

import { pathsToModuleNameMapper, type JestConfigWithTsJest } from 'ts-jest';
const chrome = require('sinon-chrome/extensions');

const config: JestConfigWithTsJest = {
  extensionsToTreatAsEsm: ['.ts'],
  verbose: true,
  preset: 'ts-jest/presets/default-esm',
  testEnvironment: 'node',
  transform: {
    '^.+\\.(ts)?
  https://stackoverflow.com/a/4446660338对于指针！
: ['ts-jest', { useESM: true }],
  },
  testPathIgnorePatterns: ['./dist'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */),
  // setupFilesAfterEnv: ['./jest.setup.js'],
  globals: {
    chrome,
  },
};

export default config;

https://stackoverflow.com/a/4446660338对于指针！