jest Cannot find moduleエラーが解決できません
解決したいこと
初めてテストでJest,ReactTestingLibraryの使用しました。
src/components/organisms/Footer.tsxのファイルをテストしようとしてsrc/components/organisms/tests/F.test.tsxのテストファイルを作成して実行したところCannot find moduleエラーが発生して解決できません。
どうか解決策をご教授お願いします。
Jest,ReactTestingLibraryを導入した時の参考URL
https://zenn.dev/longbridge/articles/9e9758181c8846
発生している問題・エラー
src/components/organisms/__tests__/F.test.tsx
● Test suite failed to run
Cannot find module 'react' from '../../node_modules/@material-ui/icons/AccessAlarm.js'
Require stack:
/Users/miyazakitomochika/node_modules/@material-ui/icons/AccessAlarm.js
/Users/miyazakitomochika/node_modules/@material-ui/icons/index.js
src/components/organisms/Footer.tsx
src/components/organisms/__tests__/F.test.tsx
1 | import type { FC } from 'react';
> 2 | import { Instagram } from '@material-ui/icons';
| ^
3 | import { Box, Button, ThemeProvider } from '@mui/material';
4 | import { useNavigate, Link } from 'react-router-dom';
5 | import { FooterNaviItems } from 'components/atoms/FooterNavItem';
at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:427:11)
at Object.<anonymous> (../../node_modules/@material-ui/icons/AccessAlarm.js:12:37)
at Object.<anonymous> (../../node_modules/@material-ui/icons/index.js:33344:43)
at Object.<anonymous> (src/components/organisms/Footer.tsx:2:1)
at Object.<anonymous> (src/components/organisms/__tests__/F.test.tsx:2:1)
該当するソースコード
src ━ components
┗ organisms━ Footer.tsx
┗ __tests__━ F.test.tsx
src/components/organisms/Footer.tsx
import type { FC } from 'react';
import { Instagram } from '@material-ui/icons';
import { Box, Button, ThemeProvider } from '@mui/material';
import { useNavigate, Link } from 'react-router-dom';
import { FooterNaviItems } from 'components/atoms/FooterNavItem';
import { HomeButton } from 'components/atoms/HomeButton';
import {
FooterInstagramIcon,
FooterResponsive,
Footertheme,
} from 'components/ecosystems/ResponsiveFooterMenu';
export const Footer: FC = () => {
const navigate = useNavigate();
return (
<ThemeProvider theme={Footertheme}>
<FooterResponsive>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
{FooterNaviItems.map((item) => (
<Button
key={item.display_name}
onClick={() => {
navigate(`${item.link}`, { replace: true });
}}
sx={{ color: '#212121', fontWeight: 'bold', fontSize: 20 }}
>
{item.display_name}
</Button>
))}
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
}}
>
{HomeButton}
</Box>
<FooterInstagramIcon>
<Link to>
<Instagram fontSize="large" />
instagramはこちらへ
</Link>
</FooterInstagramIcon>
</FooterResponsive>
</ThemeProvider>
);
};
src/components/organisms/__tests__/F.test.tsx
import { render } from '@testing-library/react';
import { Footer } from '../Footer';
describe('フッター', () => {
test('コピーライト', () => {
const { container } = render(<Footer />);
expect(container.innerHTML).toMatch(
'instagramはこちらへ'
);
});
});
jest.config.json
{
"roots": [
"<rootDir>/src"
],
"testMatch": [
"**/__tests__/**/*.+(ts|tsx|js)",
"**/?(*.)+(spec|test).+(ts|tsx|js)"
],
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
},
"testEnvironment": "jest-environment-jsdom",
"setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
}
jest.setup.ts
import '@testing-library/jest-dom'
package.json
{
"name": "app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint:es": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
"lint:es:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
"lint:style": "stylelint 'src/**/*.{css,less,sass,scss}'",
"lint:style:fix": "stylelint --fix 'src/**/*.{css,less,sass,scss}'",
"lint": "npm run --silent lint:style; npm run --silent lint:es",
"lint:fix": "npm run --silent lint:style:fix; npm run --silent lint:es:fix",
"format": "prettier --write --loglevel=warn 'src/**/*.{js,jsx,ts,tsx,html,json,gql,graphql}'",
"fix": "npm run --silent format; npm run --silent lint:fix",
"preinstall": "npx typesync || :",
"preview": "vite preview",
"test": "jest --config ./jest.config.json",
"test:watch": "npm run test -- --watch"
},
"dependencies": {
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.12.3",
"@mui/types": "^7.2.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"@types/react-router-dom": "^5.3.3",
"eslint-plugin-jest-dom": "^4.0.3",
"eslint-plugin-testing-library": "^5.11.0",
"jest-environment-jsdom": "^29.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.1"
},
"devDependencies": {
"@types/eslint": "^8.37.0",
"@types/eslint-config-prettier": "^6.11.0",
"@types/jest": "^29.5.0",
"@types/prettier": "^2.7.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/testing-library__jest-dom": "^5.14.6",
"@typescript-eslint/eslint-plugin": "^5.43.0",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.8.0",
"eslint-config-standard-with-typescript": "^34.0.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"jest": "^29.5.0",
"prettier": "^2.8.8",
"stylelint": "^15.6.1",
"stylelint-config-recess-order": "^4.0.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-order": "^6.0.3",
"ts-jest": "^29.1.0",
"typescript": "*",
"vite": "^4.3.2",
"vite-tsconfig-paths": "^4.2.0"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "jest.setup.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
自分で試したこと
ドキュメントを読む
似たような問題がないかネットで調べる
コードが間違っていないか確認
0