样式组件/宏不适用于 Jest

Question

我正在尝试将 Jest ( ts-jest) 集成到我使用styled-components/macros. 但由于某种原因，Jest 抱怨以下错误：

\n

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.\n FAIL  packages/xx/src/components/button.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: macro_1.default.button is not a function\n\n      2 |\n      3 | export const Context = {\n    > 4 |   Root: styled.button``,\n        |                      ^\n      5 | }\n      6 |\n\n      at Object.<anonymous> (packages/xx/src/components/button.mock.tsx:4:22)\n      at Object.<anonymous> (packages/xx/src/components/button.test.tsx:5:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        7.073 s\nRan all test suites.\nerror Command failed with exit code 1.\n

\n

TS配置

\n

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.\n FAIL  packages/xx/src/components/button.test.tsx\n  \xe2\x97\x8f Test suite failed to run\n\n    TypeError: macro_1.default.button is not a function\n\n      2 |\n      3 | export const Context = {\n    > 4 |   Root: styled.button``,\n        |                      ^\n      5 | }\n      6 |\n\n      at Object.<anonymous> (packages/xx/src/components/button.mock.tsx:4:22)\n      at Object.<anonymous> (packages/xx/src/components/button.test.tsx:5:1)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        7.073 s\nRan all test suites.\nerror Command failed with exit code 1.\n

\n

开发依赖

\n

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

\n

Answer 1

将导入重新映射styled-components/macro到styled-components对我来说很简单。package.json 配置示例：

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