TypeError "styled": 기호가 함수가 아닙니다.
Nov 16 2020
npm 테스트를 실행 중이고 다음 오류가 발생합니다.
FAIL src/App.test.js
● Test suite failed to run
TypeError: symbol is not a function
at String (<anonymous>)
3 | import styled from "styled-components";
4 |
> 5 | const NoAccess = styled(NoAccess_)`
| ^
6 | width: 100px;
7 | height: 75px;
8 | `;
at options (node_modules/styled-components/src/models/StyledComponent.js:265:68)
at je (node_modules/styled-components/src/models/StyledComponent.js:265:68)
at Object.<anonymous> (src/App.js:5:18)
at Object.<anonymous> (src/App.test.js:2:1)
Styled는 오류가 발생하는 구성 요소에서 가져 오기 때문에 "함수가 아닌"이유를 잘 모르겠습니다.
아래에 최소한의 예를 만들었습니다.
최소한의 예
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from "react"
import NoAccess_ from './NO_ACCESS.svg';
import styled from "styled-components";
const NoAccess = styled(NoAccess_)`
width: 100px;
height: 75px;
`;
function App() {
return (
<div className="App">
<NoAccess />
</div>
);
}
export default App;
App.test.js
import React from "react"
import App from './App'
import { render, screen } from "@testing-library/react";
test("renders correct content", () => {
const { getByText, getByLabelText } = render(<App />)
screen.debug()
})
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.12.5",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"identity-obj-proxy": "^3.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"verbose": false,
"rootDir": ".",
"collectCoverageFrom": [
"**/*.{js,jsx,ts,tsx}",
"!**/*.d.ts"
],
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx"
],
"moduleNameMapper": {
"\\.(css|less|scss|sass|svg)$": "identity-obj-proxy" }, "transform": { "\\.[jt]sx?$": "babel-jest",
"^.+\\.jsx?$": "babel-jest", "^.+\\.svg$": "<rootDir>/svgTransform.js"
},
"transformIgnorePatterns": [
"/node_modules/"
],
"testMatch": [
"**/*.{spec,test}.{js,jsx,ts,tsx}"
]
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"babel-jest": "^26.6.3",
"jest": "^26.6.3"
}
}
<svg width="100" height="75" viewBox="0 0 100 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.333 0H1.66699C0.746094 0 0 0.746094 0 1.66699V58.3335C0 59.2537 0.746094 59.9998 1.66699 59.9998H46.667V73.333C46.667 74.2539 47.4131 75 48.334 75H81.667C82.5879 75 83.334 74.2539 83.334 73.333V59.9998H98.333C99.2539 59.9998 100 59.2537 100 58.3335V1.66699C100 0.746094 99.2539 0 98.333 0ZM50 71.6667V44.9998H80V71.6667H50ZM65 28.3333C60.3994 28.3386 56.6719 32.0664 56.667 36.667V41.6665H53.333V36.667C53.333 30.2231 58.5566 25 65 25C71.4434 25 76.666 30.2239 76.666 36.667V41.6665H73.333V36.667C73.3281 32.0664 69.5996 28.3386 65 28.3333ZM70 36.667V41.6665H60V36.667C60 33.905 62.2383 31.6665 65 31.6665C67.7617 31.6665 70 33.905 70 36.667ZM96.667 56.6665H83.334V43.3335C83.334 42.4126 82.5879 41.6665 81.667 41.6665H80V36.667C80 28.3821 73.2842 21.6667 65 21.6667C56.7158 21.6667 50 28.3821 50 36.667V41.6665H48.334C47.4131 41.6665 46.667 42.4126 46.667 43.3335V56.6665H3.33301V16.6665H96.667V56.6665ZM96.667 13.333H3.33301V3.33325H96.667V13.333ZM10 53.333H26.667C27.5879 53.333 28.334 52.5869 28.334 51.6667V40.0212C28.3242 37.187 26.5273 34.6677 23.8506 33.7363C24.6006 32.6353 25.002 31.333 25 30V21.6665C25 20.7456 24.2539 19.9995 23.333 19.9995H13.334C12.4131 19.9995 11.667 20.7456 11.667 21.6665V30C11.666 31.333 12.0664 32.6353 12.8174 33.7363C10.1396 34.6677 8.34277 37.187 8.33398 40.0212V51.6667C8.33398 52.5869 9.08008 53.333 10 53.333ZM15.001 23.3328H21.667V30C21.667 31.8411 20.1748 33.3335 18.334 33.3335C16.4932 33.3335 15.001 31.8411 15.001 30V23.3328ZM11.667 40.0212C11.6689 38.1697 13.1699 36.6682 15.0215 36.6667H21.6455C23.4971 36.6682 24.999 38.1697 25 40.0212V49.9998H11.667V40.0212ZM93.333 6.66675H90V10H93.333V6.66675ZM83.334 6.66675H86.667V10H83.334V6.66675ZM63.333 66.6665V59.6931C61.9102 59.1897 60.79 58.0696 60.2861 56.646C59.3662 54.042 60.7305 51.1855 63.333 50.2654C65.9375 49.3447 68.7939 50.7095 69.7148 53.3127C70.6348 55.9158 69.2705 58.7729 66.667 59.6931V66.6665H63.333ZM66.667 55.0002C66.667 54.0793 65.9209 53.3333 65 53.3333C64.0791 53.3333 63.333 54.0793 63.333 55.0002C63.333 55.9204 64.0791 56.6665 65 56.6665C65.9209 56.6665 66.667 55.9204 66.667 55.0002Z" fill="#007079"/>
</svg>
구성에 추가해야 할 것이 있다고 생각하지만 무엇인지 잘 모르겠습니다.
내가 지금까지 시도한 것 :
1. svg를 괄호로 묶으면 테스트가 진행되지만 프로젝트 컴파일은 진행되지 않습니다 (npm run dev).
2. moduleMapper 사용 (작동하지 않음)
"moduleNameMapper": {
"\\.(svg)$": "<rootDir>/test/__mocks__/svgMock.js"
}
및 svgMock :
module.exports = '';
SVG 가져 오기로 스타일이 지정된 구성 요소의 단위 테스트에서 영감을 얻었습니다 .
(작동) 더러운 솔루션 :
JS로 svg 내보내기 :
export default () =>
(<svg width="100" height="75" viewBox="0 0 100 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M98.333 0H1.66699C0.746094 0 0 0.746094 0 1.66699V58.3335C0 59.2537 0.746094 59.9998 1.66699 59.9998H46.667V73.333C46.667 74.2539 47.4131 75 48.334 75H81.667C82.5879 75 83.334 74.2539 83.334 73.333V59.9998H98.333C99.2539 59.9998 100 59.2537 100 58.3335V1.66699C100 0.746094 99.2539 0 98.333 0ZM50 71.6667V44.9998H80V71.6667H50ZM65 28.3333C60.3994 28.3386 56.6719 32.0664 56.667 36.667V41.6665H53.333V36.667C53.333 30.2231 58.5566 25 65 25C71.4434 25 76.666 30.2239 76.666 36.667V41.6665H73.333V36.667C73.3281 32.0664 69.5996 28.3386 65 28.3333ZM70 36.667V41.6665H60V36.667C60 33.905 62.2383 31.6665 65 31.6665C67.7617 31.6665 70 33.905 70 36.667ZM96.667 56.6665H83.334V43.3335C83.334 42.4126 82.5879 41.6665 81.667 41.6665H80V36.667C80 28.3821 73.2842 21.6667 65 21.6667C56.7158 21.6667 50 28.3821 50 36.667V41.6665H48.334C47.4131 41.6665 46.667 42.4126 46.667 43.3335V56.6665H3.33301V16.6665H96.667V56.6665ZM96.667 13.333H3.33301V3.33325H96.667V13.333ZM10 53.333H26.667C27.5879 53.333 28.334 52.5869 28.334 51.6667V40.0212C28.3242 37.187 26.5273 34.6677 23.8506 33.7363C24.6006 32.6353 25.002 31.333 25 30V21.6665C25 20.7456 24.2539 19.9995 23.333 19.9995H13.334C12.4131 19.9995 11.667 20.7456 11.667 21.6665V30C11.666 31.333 12.0664 32.6353 12.8174 33.7363C10.1396 34.6677 8.34277 37.187 8.33398 40.0212V51.6667C8.33398 52.5869 9.08008 53.333 10 53.333ZM15.001 23.3328H21.667V30C21.667 31.8411 20.1748 33.3335 18.334 33.3335C16.4932 33.3335 15.001 31.8411 15.001 30V23.3328ZM11.667 40.0212C11.6689 38.1697 13.1699 36.6682 15.0215 36.6667H21.6455C23.4971 36.6682 24.999 38.1697 25 40.0212V49.9998H11.667V40.0212ZM93.333 6.66675H90V10H93.333V6.66675ZM83.334 6.66675H86.667V10H83.334V6.66675ZM63.333 66.6665V59.6931C61.9102 59.1897 60.79 58.0696 60.2861 56.646C59.3662 54.042 60.7305 51.1855 63.333 50.2654C65.9375 49.3447 68.7939 50.7095 69.7148 53.3127C70.6348 55.9158 69.2705 58.7729 66.667 59.6931V66.6665H63.333ZM66.667 55.0002C66.667 54.0793 65.9209 53.3333 65 53.3333C64.0791 53.3333 63.333 54.0793 63.333 55.0002C63.333 55.9204 64.0791 56.6665 65 56.6665C65.9209 56.6665 66.667 55.9204 66.667 55.0002Z" fill="#007079"/>
</svg>)
답변
1 tmhao2005 Nov 17 2020 at 10:09
파일의 경우 를 반환하는 변환기를 사용하여 svg동일한 방식으로 수행 할 수있는 한 구성 요소를 반환하도록 로더를 가져 오도록 설정 한 것 같습니다 .jestjsxsvg
다음과 같이 파일 jest-svg-transformer을 변환 하는 데 사용 하는 것이 좋습니다 svg.
// Install
// npm i -D jest-svg-transformer / yarn add -D jest-svg-transformer
transform: {
// ...
"\\.svg$": "jest-svg-transformer"
},
또한 다음 위치에서 기존 매퍼 모의 svg파일 을 제거해야합니다 .
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy", // Remove `svg` from this pattern
},