Hi I am trying to use Jest, but it keeps giving an error of cannot find module. I am not sure if this has to do with the paths of the files. All the files below are located out of my src folder. I have my file set up below.
jest.config.js file:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": [
"./__tests__"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": [
"./setupTest"
],
"moduleDirectories": ["node_modules", "src"]
}
my test file located in __ test __:
import React from 'react';
import { shallow, mount } from 'enzyme';
import Routes, { OrderScreen, ShippingScreen, HomeScreen } from ../../src/App';
import {
MemoryRouter
} from 'react-router'
import { Route } from 'react-router-dom';
let pathMap = {};
describe('App', () => {
beforeAll(() => {
const component = shallow(<Routes />);
pathMap = component.find(Route).reduce((pathMap, route) => {
const routeProps = route.props();
pathMap[routeProps.path] = routeProps.component;
return pathMap;
}, {});
console.log(pathMap)
})
it('should show Home component for / router (getting array of routes)', () => {
expect(pathMap['/']).toBe(HomeScreen);
})
it('should show News Feed component for /news router', () => {
expect(pathMap['/order/:id']).toBe(OrderScreen);
})
it('should show News Feed component techdomain for /news router', () => {
expect(pathMap['/shipping']).toBe(ShippingScreen);
})
it('should show No match component for route not defined', () => {
expect(pathMap['/search/:keyword/page/:pageNumber']).toBe(HomeScreen);
})
})
package jason
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.12.17",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-redux": "^7.2.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-side-effect": "^2.1.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test:t": "react-scripts test",
"eject": "react-scripts eject",
"test": "jest",
"test:cover": "jest --coverage",
"open:coverage": "open ./coverage/lcov-report/index.html"
},
"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"
]
},
"devDependencies": {
"#babel/core": "^7.13.8",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.8",
"#babel/preset-react": "^7.12.13",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"babel-jest": "^26.6.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest": "^26.6.3",
"jest-enzyme": "^7.1.2",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
['#babel/preset-react', { targets: { node: 'current' } }] // add this
]
};
Everything seems fine I've been following a tutorial but I cannot get over the error cannot find module it happens in my test file at this line
> 4 | import App, { App as AppComponent } from '../../src/App';
Does this have to do something with paths that need to be fixed? everything is located outside of my src folder. My main file App.js which I am trying to test is within my src folder.
Try this:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": ["<rootDir>/__tests__/"], // or "<rootDir>/src/__tests__/"
"transform": {"^.+\\.js?$": "babel-jest"},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": ["<rootDir>/setupTest"],
"moduleNameMapper": {
"^src/(.*)": "<rootDir>/src/$1",
}
}
Related
I created a Turborepo testing project and I wanted to try if ESlint config that it's set in the root of the Turborepo applies to all of the projects inside my /apps folder, turns out it does not work for me... Where did I mess up ?
I was following this article .
/packages/esling-config-custom/index.js
module.exports = {
extends: ["next", "turbo", "prettier"],
rules: {
"no-console": 2,
"#next/next/no-html-link-for-pages": "off",
},
};
.eslintrc.js (root of Turborepo)
module.exports = {
root: true,
// This tells ESLint to load the config from the package `eslint-config-custom`
extends: ["custom"],
settings: {
next: {
rootDir: ["apps/*/"],
},
},
};
/apps/testing-app/.eslintrc.js
module.exports = {
...require("eslint-config-custom/index"),
parserOptions: {
tsconfigRootDir: __dirname,
project: "./tsconfig.json",
},
};
/apps/testing-app/package.json
{
"name": "testing-app",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#headlessui/react": "^1.7.2",
"#heroicons/react": "^2.0.10",
"#stripe/react-stripe-js": "^1.13.0",
"#stripe/stripe-js": "^1.41.0",
"#supabase/supabase-js": "^2.0.0-rc.10",
"#tailwindcss/line-clamp": "^0.4.2",
"#tanstack/react-query": "^4.3.4",
"axios": "^0.27.2",
"daisyui": "^2.25.0",
"framer-motion": "^7.3.2",
"next": "12.2.5",
"next-transpile-modules": "^10.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"stripe": "^10.14.0",
"ui": "*"
},
"devDependencies": {
"#types/node": "18.7.16",
"#types/react": "18.0.18",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.8",
"eslint": "8.23.0",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.1.8",
"tsconfig": "*",
"eslint-config-custom": "*",
"typescript": "4.8.2"
}
}
/apps/testing-app/pages/index.tsx
import type { NextPage } from "next";
const Home: NextPage = () => {
return (
<h1 className="text-3xl font-bold underline">
Hello world!<>{console.log("hey")}</> //I should get an error here which I don't...
</h1>
);
};
export default Home;
I'm trying to add tests to an existing React TypeScript App.
But every time I run the tests, it's failing with this error:
/node_modules/#iconify/icons-eva/menu-2-fill.js:6
export default data;
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import { Icon } from "#iconify/react";
> 2 | import menu2Fill from "#iconify/icons-eva/menu-2-fill";
| ^
3 | import { alpha, styled } from "#mui/material/styles";
4 | import { Box, Stack, AppBar, Toolbar, IconButton } from "#mui/material";
5 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (src/layouts/dashboard/DashboardNavbar.tsx:2:1)
Referred to Jest setup "SyntaxError: Unexpected token export" and tried to add moduleNameMapper and transformIgnorePatterns to my jest.config.js file. This is how it looks.
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: "ts-jest",
verbose: true,
transform: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js",
"^.+\\.tsx?$": "ts-jest",
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.ts",
moduleNameMapper: {
"#iconify/icons-eva/(.*)$": "#iconify/react/dist/$1",
},
transformIgnorePatterns: ["<rootDir>/node_modules/(?!#iconify)"],
};
It stills fails.
This is what my package.json file looks like in case that helps:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#fontsource/roboto": "^4.5.3",
"#iconify/icons-eva": "^1.2.0",
"#iconify/icons-ic": "^1.2.0",
"#iconify/react": "^3.1.3",
"#mui/icons-material": "^5.4.1",
"#mui/lab": "^5.0.0-alpha.68",
"#mui/material": "^5.4.1",
"#mui/styled-engine-sc": "^5.4.1",
"#reduxjs/toolkit": "^1.7.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/node": "^12.20.46",
"#types/react": "^16.14.23",
"#types/react-dom": "^16.9.14",
"#types/react-redux": "^7.1.22",
"axios": "^0.26.0",
"change-case": "^4.1.2",
"formik": "^2.2.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet-async": "^1.2.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"simplebar-react": "^2.3.6",
"styled-components": "^5.3.3",
"typescript": "^4.1.6",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/jest": "^24.9.1"
}
}
I recently started learning React, but right now I am having an issue import one of the components in App.js
My current structure is:
src
--components
----Nav
------Nav.jsx
--App.js
Inside my App.js I have:
import Nav from './src/components/Nav/Nav';
However, I get the following error:
./src/App.js
Module not found: Can't resolve './src/components/Nav/Nav' in 'PATH_TO_PROJECT/project/src'
My webpack.config.js is:
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module:{
rules:[{
loader: 'babel-loader',
test: /\.js$|jsx/,
exclude: /node_modules/
}],
exports: {
resolve: {
extensions:['.js','.jsx']
}
}
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public')
}
}
And this is also my package.json:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.7.1",
"bootstrap": "^4.6.0",
"express": "^4.17.1",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack",
"test": "webpack serve",
"eject": "webpack --watch"
},
"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"
]
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.17",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.1.0",
"webpack": "^4.44.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.0"
}
}
I was wondering what am I doing wrong?
The error is occurring due to the wrong project path specification.
The src is the source directory of a react application.
When importing use the following
import Nav from './components/Nav/Nav';
I have following function in actions.js file
export const mockFunction = () => {
return true
}
I have an index.js file, where I want to export this function to the rest of the app
import * as actions from './actions'
export {actions}
I get as error:
Failed to compile
./src/providers/xxform_provider/actions.jsx
Error: ENOENT: no such file or directory, open '/Users/client/xxxx/src/providers/xxform_provider/actions.jsx'
I am not using webpack, actually I guess no, if I have a look at my package.json
I am using create-react-app
https://github.com/facebook/create-react-app
Does anybody know what create-react-app uses as a js bundler? I can not tell from the package.json file
{
"name": "react_porter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.9.0",
"#material-ui/lab": "^4.0.0-alpha.40",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-swipe": "^6.0.4",
"react-swipeable-views": "^0.13.5",
"styled-components": "^5.0.0",
"swipe-js-iso": "^2.1.5",
"swipejs": "^2.2.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
actions.js
const mockFunction = () => true;
export default mockFunction;
index.js
import mockFunction from './actions';
i hope this helps
I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}