如何使已声明的模块在酶浅渲染中可见？

Question

我一直试图弄清楚在我的笑话单元测试中使用酶浅浅地渲染组件时如何找到声明的模块。我有一个这样的自定义声明模块：

// index.d.ts
declare module "_aphrodite" {
    import {StyleDeclarationValue} from "aphrodite";

    type CSSInputType = StyleDeclarationValue | false | null | void;

    interface ICSSInputTypesArray extends Array<CSSInputTypes> {}

    export type CSSInputTypes = CSSInputType | CSSInputType[] | ICSSInputTypesArray;
}

哪个由我的名为closeButton的组件使用：

// closeButton.tsx
import {CSSInputTypes} from "_aphrodite";

export interface ICloseButtonProps {
  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  cssStyles?: CSSInputTypes;
}

@injectable()
@observer
@autobind
export class CloseButton extends React.Component<ICloseButtonProps> {
    // implementation
}

以及一个浅浅呈现组件的简单单元测试：

// closeButton.test.tsx
import {shallow} from "enzyme";
import {CloseButton} from "../../common";
import * as React from "react";

describe("Common - Close Button", () => {
  it("Shallow Render", () => {
    const component = shallow(<CloseButton onClick={null}/>);

    console.log(component);
  });
});

运行测试时，出现以下错误：

这很奇怪，因为closeButton类不会引发任何编译错误，并且可以很好地映射模块。当我在本地运行项目时，也是如此，它不会引发有关无法找到_aphrodite模块的任何运行时错误。看来这只是通过测试。

现在，我尝试更改我的jest.config.json，tsconfig.json和webpack.config.js设置中的各种设置，但很幸运。我希望有人的经验比我知道的要多，以便在组件上运行浅渲染时才能找到_aphrodite模块。

以下是上述文件的设置：

// jest.config.json
{
  "verbose": true,
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js"
  ],
  "moduleDirectories": [
    "node_modules",
    "src"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/src/components/__tests__/_transformers/fileTransformer.js"
  },
  "transform": {
    "\\.(ts|tsx)$": "ts-jest"
  },
  "setupFiles": [
    "<rootDir>/src/components/__tests__/setup.ts"
  ],
  "testRegex": "(/__tests__/\\.*|(\\.|/)(test))\\.tsx?$",
  "testURL": "http://localhost/",
  "collectCoverage": false,
  "timers": "fake"
}

// tsconfig.json
{
  "compileOnSave": true,
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es2018",
    "jsx": "react",
    "watch": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "inlineSourceMap": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": [
      "dom",
      "dom.iterable",
      "es2018",
      "esnext"
    ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "isolatedModules": false
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs'); // to check if the file exists

module.exports = () => {

  return {
    plugins: []
  };
};

/**
 * DevServer
 */
const devServer = {
  inline: true,
  host: "localhost",
  port: 3000,
  stats: "errors-only",
  historyApiFallback: true,
  watchOptions: {
    poll: true
  },
};

module.exports.getEnv = () => {
  // Create the fallback path (the production .env)
  const basePath = __dirname + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + ".local";

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // call dotenv and it will return an Object with a parsed key
  const finalEnv = dotenv.config({path: finalPath}).parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(finalEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(finalEnv[next]);
  return prev;
}, {});
  return new webpack.DefinePlugin(envKeys);
};

/**
 * Plugins
 */
const plugins = [
  new HtmlWebpackPlugin({
    template: "./index.html"
  }),
  module.exports.getEnv()
];

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/build",
    publicPath: "/"
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
      {test: /\.tsx?$/, loader: "ts-loader"},

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {enforce: "pre", test: /\.js$/, loader: "source-map-loader", exclude: [/node_modules/, /build/, /__test__/]},

      {test:/\.css$/, use:['style-loader','css-loader'] },

      {test:/\.(png|svg)$/, loader: "url-loader"},

      {test:/\.mp3$/, loader: "url-loader" }
    ]
  },
  plugins: plugins,
  devServer: devServer,
  mode: "development",
  performance: {
    hints: false
  }
};

这是我的项目结构：

随时询问是否需要更多信息。

Answer 1

结果我只需要将其添加到jest.config.json中的安装文件列表中>

// jest.config.json
"setupFiles": [
  "<rootDir>/src/components/__tests__/setup.ts",
  "<rootDir>/src/aphrodite/index.ts"
],