Erreur de plaisanterie : SyntaxError : impossible d'utiliser l'instruction d'importation en dehors du module
J'utilise React et Typescript.
Dans mon fichier de test, j'essaie de restituer un composant
test("Render Header", () => {
render(<Header />);
});
Le composant d'en-tête utilise le créateur d'action dans actions.tsx
import { loadRepo } from "../../redux/actions";
dispatch(loadRepo());
loadRepo est un créateur d'opérations asynchrones utilisant axios. Mon test génère une erreur car j'ai importé des axios dans actions.tsx. L'erreur est la suivante : L'instruction import ne peut pas être utilisée en dehors du module.
J'ai essayé de configurer la configuration de Babel et Jest. C'est ce que j'ai.
babel.config.js
module.exports = {
presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
plugins: [],
};
jest.config.js
module.exports = {
setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
moduleNameMapper: {
"\.(css|less|scss|sass)$": "identity-obj-proxy",
},
transform: {
"^.+\.(js|jsx|ts|tsx)$": "babel-jest",
},
};
package.json
"dependencies": {
"@testing-library/user-event": "^13.5.0",
"@types/node": "^16.18.23",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"axios": "^1.3.5",
"bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-bootstrap": "^2.7.3",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"babel-jest": "^29.5.0",
"jest": "^27.5.1"
}