CODEWITHSUNDEEP
reactjsmocha.jschai
Mark Kadlec
Mark Kadlec

Reputation: 8450

How can I run tests on React components that use jQuery?

I have a React component that uses a jQuery selector to match the height of all components in the componentDidMount():

$('.js-matchHeight').matchHeight();

Works fine when running Servers like webpack, but when I write my specs (Mocha and Chai), it complains:

ReferenceError: $ is not defined

How can I add jQuery to my tests?

Upvotes: 1

Views: 285

Answers (1)

marcinrek
marcinrek

Reputation: 339

Have you tried adding browser-env to your tests ?

import browserEnv from 'browser-env';
browserEnv();

I had similar issue with unit test done with AVA and I think that resolved the issue. Not sure but I think I also imported jQuery and/or Cheerio.

EDIT:

Well the workaround I have is to test against jQuery in your components like:

if (typeof jQuery !== 'undefined') {
    $('.js-matchHeight').matchHeight();
}

or if you have jQuery in a module that you import you can export different component versions like:

module.exports = (typeof jQuery !== 'undefined')
    ? browser(jQuery)
    : nonBrowser();

Non of this is perfect but if you want perfect you should keep jQuery away from your jsx I think :)

Upvotes: 1

Related Questions