So I'm having issues when I use enzyme to test a component thats using css modules. Or should I say filename.module.scss
Whats happening when I do something like:
const wrapper = shallow(<MyComponent {...data}/>);
console.log('wrapper = ', wrapper.debug());
My debug works and shows my component structure with all my divs in there. The issue is none of my styles are getting added durning running tests. But when I run Gatsby develop the styles are getting added. So just to be clear only in test mode do I not see the styles added to my component!!!
MyComponent.js
import React, { Component } from 'react';
import styles from ‘./MyComponent.module.scss';
class MyComponent extends Component {
render() {
const {
name,
} = this.props;
return (
<React.Fragment>
<div className={styles.header}>
<div className={styles.name}>{name}</div>
</div>
</React.Fragment>
);
}
}
My debug is showing all styles as undefined which is driving me crazy as I can't test based on style name if a div exists.
Here is my package setup for jest.
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
For anyone else running into this issue.
npm install identity-obj-proxy
then add this to your package.json
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|sass|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/.jest/setupFiles.js"
]
}
Hope this helps someone.
Related
I am trying to install mdbootstrap vue into a Laravel 5.7 project, but i realy don't understand how i suppose to do it.
I did everything like in here but anyway it doesn't work.
On rendering I got such vue error :
Unknown custom element: <mdb-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Code from view:
<mdb-btn color="elegant">Elegant</mdb-btn>
please follow this steps from this answer https://github.com/mdbootstrap/Vue-Bootstrap-with-Material-Design/issues/1#issuecomment-372342369 :
insert this in your main.js file:
import 'mdbvue/build/css/mdb.css'
import 'mdbvue/src/components/Waves.css'
then in your component import the components that you need:
import { Container, Row, Column, Btn, Card } from 'mdbvue';
for example:
<template>
<mdb-btn-fixed #mouseenter.native="hover" #mouseleave.native="hoverOut"
icon="pencil" size="lg" :bottom="30" :right="25">
<mdb-btn-fixed-item :show="show" color="red" icon="star"/>
<mdb-btn-fixed-item :show="show" color="yellow" icon="user"/>
<mdb-btn-fixed-item :show="show" color="green" icon="envelope"/>
<mdb-btn-fixed-item :show="show" color="blue" icon="shopping-cart"/>
</mdb-btn-fixed>
</template>
<script>
import { mdbBtn, mdbBtnFixed, mdbBtnFixedItem } from 'mdbvue';
export default {
data() {
return {
show: false
};
},
name: 'ButtonPage',
components: {
mdbBtn,
mdbBtnFixed,
mdbBtnFixedItem
},
};
You have a lot of examples of usage here at the bottom: https://mdbootstrap.com/docs/vue/components/buttons/
I want to import a React component from a jsx file in a template and render it in the template with ReactDOM. Later in production I would only want to ship react and all the dependencies of the component only when a site is loaded that has that component.
I have created a React component like this:
editor.jsx
import * as React from "react";
import {Editor} from "draft-js-plugins-editor";
const plugins = [];
export class EditorComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
};
}
onChange(editorState) {
this.setState({
editorState,
});
}
render() {
return (<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>);
}
}
http://www.phoenixframework.org/docs/static-assets suggests the require syntax for accessing module exports. So I added the following to my template <script>const editor = require("web/static/js/editor").EditorComponent</script>. This does not work though, because the browser cannot interpret require (or brunch does not pick it up).
I configured brunch like so:
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/],
presets: ["es2015","react"]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"],
"js/editor.jsx": ["web/static/js/editor"]
}
},
I am a bit lost here. How can this be done?
One idea that pops to mind is to create a JS file and import it in the template you want with a <script> tag. In the same template create an empty <div id=editor>. Then, in the JS file import React and ReactDOM and the component you want and use something like this:
ReactDOM.render(
<Editor/>,
document.getElementById("editor")
)
However, I'm not sure I understand your problem correctly.
I'm having trouble getting a simple image to show up in a simple app using Webpack and React.
I've read this thru and tried a few different ways, but keep getting various errors, or at best sometimes no errors, but also no image displaying.
Here is my React component:
import React from 'react';
import styles from '../css/main.css';
import Menu from './Menu';
const logo = require('./images/PIVX_Planet_1a_239x83.png');
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {test: 'foo'};
}
render() {
return (
<div>
<div id='container'></div>
<div className={styles.logo}>
<img src={logo}/>
</div>
<div>
<Menu/>
</div>
</div>
);
}
}
Here is my webpack config:
...
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["react", "es2015", "stage-0", "react-hmre"]
}
}, {
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
}, {
test: /\.json?$/,
loader: 'json'
}, {
test: /\.css$/,
loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
}]
}
...
With this, get error from webpack in console:
ERROR in ./app/components/App.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./images/PIVX_Planet_1a_239x83.png in /Users/mac/_DEV/_LAB/PIVX/PIVX-Planet-2/app/components
# ./app/components/App.js 67:11-56
I've also tried using babel-plugin-transform-react-jsx-img-import
(https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import)
And then just use:
<div className={styles.logo}>
<img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>
In that case, there are no errors, but the image show up broken.
I've tried changing the relative path to the image with all these combinations.
Directory structure:
app
components
App.js
images
PIVX_Planet_1a_239x83.png
index.html
...
Any insights?
As per your directory structure the path that you need to use is
const logo = require('../images/PIVX_Planet_1a_239x83.png');
since images is under app directory and not under components from where you are trying to get the image location
Also make sure all your loaders are properly installed
you can also try let as:
let logo = require('../images/PIVX_Planet_1a_239x83.png');
Always use let as much as possible to avoid the scope monster
The problem I was having was using
import logo from './images/PIVX_Planet_1a_239x83.png'
instead of
const logo = require('./images/PIVX_Planet_1a_239x83.png');
in a typescript react app w/ a bespoke webpack config.
I have tried everything that you guys have suggested but nothing is working for me. when I put my code in and 'run dev' it come out with an error placeholder. I am using it in the app.js and would like my logo as a link to the home page or just show up at all, in this case I was attempting to just have it on the page.
import '../styles/globals.css'
import Link from 'next/link'
import bpdlogofull from '../public/bpdlogofull.png'
`function MyApp({ Component, pageProps }) {
return (
<div>
<nav className="border-b p-6">
<img src={bpdlogofull} alt='logo'className='flex justify-end'/>
<div className="flex mt-4">
<Link href="/" className="home-button">
I'm trying to declare some basic css rules to use them globally in my app. Like pull-rx, pull-lx and so on...
After writing these rules into app.scss, the main.css file inside the build folder gets updated correctly, but when it comes to use one of these rules inside a "LoginPage" for example, each of the rules I've declared before are ignored. Am I missing something?
If I write the pull-rx class inside the login.scss file instead, it will work. Is there a way to get a class globally?
app.scss:
.pull-rx {
float: right !important
}
.pull-lx{
float: left !important
}
app.module.ts:
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
#NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
login.html:
<ion-header>
<ion-navbar>
<ion-title>
Astrid <small><i>Beta</i></small> <span class="pull-rx">Login</span>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I've figured this out. Since Ionic uses scsss as preprocessor, I have to set the semicolons ";" at the end of the rule. Since I am used to code in sass that were causing the problem.
I'm currently trying to evaluate different testing frameworks that work with React, and it turns out that Jest is on my list. However, I'm trying to use static properties outlined here: https://github.com/jeffmo/es-class-fields-and-static-properties.
So, I took the tutorial that is given on the Jest homepage, and added a static propTypes property, my code looks like this:
import React from 'react';
class CheckboxWithLabel extends React.Component {
static defaultProps = {}
constructor(props) {
super(props);
this.state = {isChecked: false};
// since auto-binding is disabled for React's class model
// we can prebind methods here
// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({isChecked: !this.state.isChecked});
}
render() {
return (
<label>
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.onChange}
/>
{this.state.isChecked ? this.props.labelOn : this.props.labelOff}
</label>
);
}
}
module.exports = CheckboxWithLabel;
When I run the tests (npm test or jest), It throws the following error:
➜ jest
Using Jest CLI v0.8.2, jasmine1
FAIL __tests__/CheckboxWithLabel-test.js
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)
My package.json file looks like this:
{
"dependencies": {
"react": "~0.14.0",
"react-dom": "~0.14.0"
},
"devDependencies": {
"babel-jest": "*",
"babel-preset-es2015": "*",
"babel-preset-react": "*",
"jest-cli": "*",
"react-addons-test-utils": "~0.14.0"
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"<rootDir>/node_modules/fbjs"
],
"modulePathIgnorePatterns": [
"<rootDir>/node_modules/"
]
}
}
Any ideas on what I'm missing here?
Thanks.
Any ideas on what I'm missing here?
Class properties are neither part of the es2015 nor the react preset.
You have to load the plugins that handles class properties:
npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties
And in your .babelrc file (next to existing plugins or presets):
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
This error occurs since Standard ES2015(ES6) classes can only have methods, not properties.
For me, it was resolved by installing babel-preset-stage-0 which adds support for class properties.
npm install babel-preset-stage-0 --save-dev
Then configure Webpack (or .babelrc) to use this preset:
//...
presets: ['react', 'es2015', 'stage-0']
//...
UPDATE:
As of Mid-2018, Babel env preset supports ES2015, ES2016 and ES2017.
So, you can skip stage-0 preset and instead use the env preset
npm install babel-preset-env --save-dev
And then update your .babelrc to
//...
presets: ['env', 'xyz']
//...
To support latest ES2018 features like spread operator/async functions, you can add stage-3 preset.
Reference tutorial