I have a container component that is using a sub component which has a CSS/SCSS file imported. And this import is causing a test error.
When I comment out the line importing the SCSS file it will work, but of course we should try to get the jest test to accept that import.
C:\Users\PLX8220\Projects\USAA\pc-non-member-fnol\src\components\01-member-validation\partials\member-info.scss:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){.member-info-form { ^
SyntaxError: Unexpected token .
15 | import * as validate from '../../../shared/validators/policy-number-validator';
16 |
> 17 | import './member-info.scss';
| ^
The Container
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {reduxForm} from 'redux-form';
import Form, {buildSubmitButton} from 'my-form';
import MemberInfo from './partials/member-info';
// Constants
import * as constants from '../../shared/constants';
export class MemberValidation extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(values) {
this.props.dispatch(this.props.onNextClick);
}
render() {
const {handleSubmit} = this.props;
return (
<React.Fragment>
<Form onSubmit={handleSubmit(this.onSubmit)}>
<MemberInfo /> // <-- the Sub component with the error.
</Form>
</React.Fragment>
);
}
}
export const MemberValidationForm = reduxForm({
form: 'MemberValidation',
destroyOnUnmount: false
})(MemberValidation);
const mapStateToProps = state => {
return {
formNonMember: state.form
};
};
export MemberValidationFormJest = MemberValidationForm;
export default connect(mapStateToProps, null)(MemberValidationForm);
The sub component (with error)
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Field} from 'redux-form';
// Components
import FormSection from 'my-form/lib/layout/form-section';
import FormGroup from 'my-form/lib/layout/form-group';
import Input from 'my-form/lib/fields/text-input';
import Select from 'my-form/lib/fields/select';
import FormattedTextInput from 'my-form/lib/fields/formatted-text-input';
import UserNotice from 'my-messaging/lib/user-notice';
// Constants
import * as constants from '../../../shared/constants';
import * as validate from '../../../shared/validators/policy-number-validator';
import './member-info.scss'; // <-- The .scss file :(
const {FIELDS_MEMBER_INFO: {NAMES}, colMd112} = constants;
export class MemberInfo extends Component {
render() {
return (
...
Aucun commentaire:
Enregistrer un commentaire