React Jest Enzyme - test failed when import markdown - reactjs

When I try to run my test they failed in my class he's trying to import my markdown files:
import StartRecord from './Documentation/content/API/Start_record.md';
import UseLive from './Documentation/content/User/Live.md';
import UseRecord from './Documentation/content/User/Record.md';
import UseReplay from './Documentation/content/User/Replay.md';
import Settings from './Documentation/content/User/Settings.md';
Here is my failed message:
FAIL src/__test__/App.test.js
● Test suite failed to run
/Users/anyone/Desktop/web/src/Modules/Dashboard/Documentation/content/User/Live.md:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){# Interface
^
SyntaxError: Invalid or unexpected token
8 | // Content
9 | import StartRecord from './Documentation/content/API/Start_record.md';
> 10 | import UseLive from './Documentation/content/User/Live.md';
| ^
11 | import UseRecord from './Documentation/content/User/Record.md';
12 | import UseReplay from './Documentation/content/User/Replay.md';
13 | import Settings from './Documentation/content/User/Settings.md';
I have search many error like but never found with markdown.
I use webpack and have already configure it to read markdown. (It's a part of the webconfig file)
{
test: /\.md$/,
include: /node_modules/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader"
}
]
}

I have found solution in my jest config by adding to extensions and moduleNameMapper the html and md like that:
module.exports = {
moduleFileExtensions: ['js', 'jsx', 'json', 'png', 'md', 'html'],
transform: {
'^.+\\.(js|jsx)?$': 'babel-jest'
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md|html)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"setupFiles": [
"./configJSDom.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/*.js",
"src/*/*.js",
"src/*/*/*.js",
"!src/test.js",
"!src/serviceWorker.js",
"!src/index.js"
]
};

Related

React Js, Web Pack - not able to import css file from node_module into a react component

I'm using the react-html5-camera-photo node module in my project to take a photo from the camera. The library requires the component using the Camera component to import a css file (react-html5-camera-photo/build/css/index.css) to style capture buttons.
Even after adding import 'react-html5-camera-photo/build/css/index.css' into my react component, the styles are not applied and on checking the rendered elements through inspect element none of the styles are applied from the imported css file.
I tried changing my webpack.config.js settings but had no success.
Here are my webpack.config.js settings
module: {
rules: [
{
test: /react\-html5\-camera\-photo(.*?)\.css$/,
use: [
{ loader: "css-loader", options:{
modules: false
}}
]
},
{
test: /\.(scss|css)$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader",
options: {
modules: true,
}},
{ loader: "sass-loader" }
]
}
]
}
But with this setting, the css-loader shows Module build error
ERROR in ../node_modules/react-html5-camera-photo/build/css/index.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(2:7) \node_modules\react-html5-camera-photo\build\css\index.css Unknown word
1 |
> 2 | import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";
# ./components/OnsiteSituation/OnsiteSituation.tsx 84:0-54
# ./components/ServiceLead/ServiceLead.tsx 47:0-65 79:803-818
# ./App.tsx 33:0-63 45:370-381
# ./index.tsx 3:0-26 8:21-24
webpack 5.64.0 compiled with 1 error in 29408 ms
Thanks in advance,
I'm guessing the issue is react-html5-camera-photo\build\css\index.css was processing with css-loader twice due to meeting the rules twice so I think your issue can be sorted out by just exclude react-html5-camera-photo from the 2nd rule as following:
[
{
test: /react\-html5\-camera\-photo(.*?)\.css$/,
use: [
// ...
]
},
{
test: /\.(scss|css)$/,
// exclude your above rule to avoid processing twice
exclude: /react\-html5\-camera\-photo(.*?)\.css$/,
use: [
// ...
]
}
]

Jest test error - Cannot find module meteor/tprzytula:remember-me

I am using meteor/tprzytula:remember-me package in my Meteor React app.
I also use Jest for test automation.
I use the RememberMe component in my Signin form (a React functional component in Meteor)
When I try running tests with Jest I get the following error:
Cannot find module 'meteor/tprzytula:remember-me' from 'imports/ui/components/signin/SigninForm.js'
Require stack:
imports/ui/components/signin/SigninForm.js
tests/Signin.test.js
2 | import React, {useState, useRef} from 'react';
3 | import {Accounts} from 'meteor/accounts-base';
> 4 | import RememberMe from 'meteor/tprzytula:remember-me';
| ^
Here is my test code using Jest and Enzyme
tests/Signin.test.js
const wrapper = mount(<SigninForm />);
Update
I run my tests using npm test. Here is my entry on package.json
package.json
"test": "./node_modules/.bin/jest --verbose --silent",
Also adding my jest.config.js. Note I commented out moduleNameMapper. It errors out either way.
jest.config.js
module.exports = {
setupFiles: [
'./tests/setupTests.js',
],
transform: {
'^.+\\.jsx?$': 'babel-jest',
},
moduleFileExtensions: [
'js',
'jsx',
],
modulePaths: [
'<rootDir>/node_modules/',
'<rootDir>/node_modules/jest-meteor-stubs/lib/',
],
// moduleNameMapper: {
// 'meteor/tprzytula:remember-me': 'meteor/tprzytula:remember-me',
// '^(.*):(.*)$': '$1_$2',
// },
unmockedModulePathPatterns: [
'/^imports\\/.*\\.jsx?$/',
'/^node_modules/',
],
};
Is there a solution/workaround for this problem?

How to setup alias for Jest with craco

I'm building react app provided by create-react-app.
I use craco to make configuration simplify and have set up alise for TypeScript and Webpack.
But when I run test command, the following error is displayed.
Error Message
spec/showMessage.test.tsx
● Test suite failed to run
Cannot find module '#/components/atom/TextButton' from 'src/pages/index.tsx'
Require stack:
src/pages/index.tsx
spec/showMessage.test.tsx
3 | import styled from 'styled-components';
4 |
> 5 | import { TextButton } from '#/components/atom/TextButton';
| ^
This is my craco.config.js
craco.config.js
const path = require("path");
module.exports = {
jest: {
configure: {
roots: ['<rootDir>/src', '<rootDir>/spec'],
testMatch: ['<rootDir>/spec/**/*.{spec,test}.{js,jsx,ts,tsx}'],
},
},
webpack: {
alias: {
"#": path.resolve(__dirname, "./src/"),
"##": path.resolve(__dirname, "./")
},
extensions: ['.ts', '.tsx'],
},
};
I found the solution, I updated package.json like below, it solves this problem.
{
"name": "xxxxx",
:
},
"jest": {
"moduleNameMapper": {
"^#/(.+)": "<rootDir>/src/$1"
}
}
}

Syntax Error while using ReactDOMServer with Sass

Im getting Syntax Error like below while using ReactDOMServer and Sass in my project:
SyntaxError: /Users/ceyhun23/Sites/{project_name}/lib/components/common/Menu/Menu.scss: Unexpected character '#' (1:3)
0|server | > 1 | img#logo{
0|server | | ^
0|server | 2 | height: 100%;
0|server | 3 | }
webpack.config.js:
const path = require('path');
const config = {
resolve: {
alias: {
Assets: path.resolve(__dirname, 'lib/assets/'),
}
},
entry: ['babel-polyfill', './lib/components/App.js'],
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(png|jpg)$/i,
exclude: /node_modules/,
loader: 'url-loader',
include: path.resolve(__dirname, 'lib/assets/images')
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
};
module.exports = config;
This is my server scripts with ExpressJs
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';
const serverRender = () => {
return ReactDOMServer.renderToString(
<App />
);
};
export default serverRender;
Menu component is child component of App component, and Menu.scss imported like below:
import React from 'react';
import './Menu.scss';
export default class Menu extends React.Component {
render() {...}
}
and Finally Menu.scss :
img#logo{
height: 100%;
}
Do you have any suggestion? Could you tell me please, whats wrong with my source ?
Thanks!
After long investigation I found 2 type of solution for this issue thanks to dimaip!
So , Im giving related links below you can check if you have this problem like me:
1) 1st is adding env variable to check in webpack for importing css or not, and using .css file seperated from bundle.js
For this solution you can check this link
2) 2nd solution is using webpack for server-side renderToString function and using it inside app.get('*')
Additionaly, you can check this link
Thanks!!!

Webpack 3 Bootstrap 4 Error #media

I am trying to use React, Typescript, Webpack 3 and Bootstrap 4 to create a basic working project. When I import bootstrap.css in main .tsx file I am getting error like Unexpected Symbol - # - in /node_modules/bootstrap/dist/css/bootstrap.css.
Below is my webpack.config.js file :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/app.tsx'
},
output: {
path: path.join(__dirname,'dist'),
filename: '[name].bundle.js'
},
watch:true,
resolve: {
extensions: ['.ts','.tsx','.js']
},
devServer: {
contentBase: path.join(__dirname,'dist'),
port: 3333
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['awesome-typescript-loader']
},
{
test: /.html$/,
use: ['raw-loader']
},
{
test: /\.json$/,
use: ['json-loader']
},
{
test: /\.(s)css$/,
exclude: /node_modules/,
use: ['css-loader','style-loader','sass-loader',{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
},]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
showErrors: true,
title: 'React TS Webpack App'
}),
]
}
And the below App.tsx file:
import 'bootstrap/dist/css/bootstrap.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Greet from './components/Greet';
const techStack = ['React','TypeScript','Webpack','Bootstrap'];
ReactDOM.render(<Greet techs={techStack}/>, document.getElementById('app'));
But I am getting the below error:
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected character '#' (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
| #media print {
| *,
| *::before,
# ./src/app.tsx 1:0-42
# multi (webpack)-dev-server/client?http://localhost:3333 ./src/app.tsx
Could anybody help me how to clear this error and make bootsrap and webpack work?
"Use" style-loader before css-loader...
use: ['style-loader','css-loader','sass-loader',{ ... }..]

Resources