ro-ze1106
@ro-ze1106 (tomo)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

No Answers yet.

Your answer might help someone💌