样式组件/宏不适用于 Jest

Question

我正在尝试将 Jest (

ts-jest

) 集成到我使用

styled-components/macros

的打字稿项目中。但由于某种原因，Jest 抱怨以下错误：

ts-jest[versions] (WARN) Version 4.0.2 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 FAIL  packages/xx/src/components/button.test.tsx
  ● Test suite failed to run

    TypeError: macro_1.default.button is not a function

      2 |
      3 | export const Context = {
    > 4 |   Root: styled.button``,
        |                      ^
      5 | }
      6 |

      at Object.<anonymous> (packages/xx/src/components/button.mock.tsx:4:22)
      at Object.<anonymous> (packages/xx/src/components/button.test.tsx:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        7.073 s
Ran all test suites.
error Command failed with exit code 1.

TsConfig

const path = require("path");
const { lstatSync, readdirSync } = require("fs");

// get listing of packages in mono repo
const basePath = path.resolve(__dirname, "packages");
const packages = readdirSync(basePath).filter((name) =>
  lstatSync(path.join(basePath, name)).isDirectory()
);

/** @type {import('ts-jest').InitialOptionsTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",

  rootDir: ".",
  setupFiles: [],
  moduleDirectories: [
    'node_modules',
    '<rootDir>'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  setupFilesAfterEnv: [
    '<rootDir>/setupTests.ts', 
    '<rootDir>/shimTests.ts',
    '@testing-library/jest-dom/extend-expect'
  ],
  testMatch: ['**/*.test.(ts|tsx|js)'],


  moduleNameMapper: {
    "^.+\\.(css|less|scss)$": "babel-jest",
    // automatically generated list of our packages from packages directory.
    // will tell jest where to find source code for @ahoopen/ packages, it points to the src instead of dist.
    ...packages.reduce(
      (acc, name) => ({
        ...acc,
        [`@ahoopen/${name}(.*)$`]: `<rootDir>/packages/./${name}/src/$1`,
      }),
      {}
    ),
  },
  modulePathIgnorePatterns: [
    ...packages.reduce(
      (acc, name) => [...acc, `<rootDir>/packages/${name}/dist`],
      []
    ),
  ],

  globals: {
    'ts-jest': {
      // ts-jest configuration goes here and your IDE will suggest which configs when typing
      babelConfig: {
        "presets": [
          [
            "@babel/preset-env",
            {
              "targets": {
                "node": "10"
              }
            }
          ]
        ],
        // presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
        plugins: ['macros'],
      }
    },
  },
};

开发依赖项

"devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.0",
    "@babel/plugin-transform-runtime": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "@babel/preset-react": "^7.17.12",
    "@babel/preset-typescript": "^7.17.12",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "13.2.0",
    "@types/jest": "27.5.1",
    "@types/node": "17.0.35",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-styled-components": "^2.0.7",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "eslint": "7.7.0",
    "is-ci": "2.0.0",
    "jest": "28.1.0",
    "jest-image-snapshot": "4.5.1",
    "jest-styled-components": "7.0.8",
    "jsdom-screenshot": "4.0.0",
    "lerna": "3.22.1",
    "react-dom": "18.1.0",
    "rimraf": "3.0.2",
    "styled-components": "5.3.5",
    "ts-jest": "28.0.2",
    "typescript": "4.0.2"
  }
``

Answer 1

将

styled-components/macro

导入重新映射为简单的

styled-components

对我有用。 package.json 配置示例：

"jest": {
    "moduleNameMapper": {
        "styled-components/macro": "styled-components"
    }
}