mardi 11 juin 2019

Jest error (SyntaxError: Unexpected token .) When testing a component that imports a component using .scss file

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