mercredi 7 juin 2017

React testing: JSDOM, Jquery and Parsley

I'm using a react template to build a site, so there is legacy code which wasn't my choice... And one of those is the use of parsley for forms checking. I'm trying to create some test for react components. So I decided to use Mocha and enzyme for that purpose.

My headless browser is

var makeJQ = require("jquery");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
var exposedProperties = ['window', 'navigator', 'document'];
const { window } = new JSDOM('');
const { document } = (new JSDOM('')).window;

global.window = window;
global.document = document;
global.$ = global.jQuery = makeJQ(window);

Object.keys(document.defaultView).forEach((property) => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

My test:

it('should log', function () {
        const wrapper = mount(<Login user={initialState}/>);
        wrapper.find('[placeholder="Username ou email"]').simulate('change', {target: {value: 'test'}});
        wrapper.find('[type="password"]').simulate('change', {target: {value: 'test@test.com'}});
        wrapper.find('[id="logging"]').simulate('click');
        //others stuffs
});

And it's failing here:

handleClick = (e) => {
        if($('#form1').parsley().isValid()){
            this.props.login(this.state.mail, this.state.password);
        }
    };

With this error:

TypeError: $(...).parsley is not a function

I understood the error (parsley is not found in that context) but how am I supposed to "attach" parsley to Jquery?

I use that page as basis: tutorial

Aucun commentaire:

Enregistrer un commentaire