Trying to use Mocha with React and Meteor and ES6 .jsx format

testing
1

Hi, I am trying to write a simple test in my Meteor application using Mocha. I’ve written my app in ES6 with .jsx formats. I installed practicalmeteor:mocha, and wrote an outline for a test

client/prospects/ProspectForm.tests.jsx

describe('ProspectForm', () => {
  it('should render', () => {
  }) 
})

When I ran the test running using

meteor test --driver-package=practicalmeteor:mocha

It ran fine, but going to the webpage localhost:3000 no tests showed up.

1283×235 10.2 KB

I messed with it and couldn’t get it to acknowledge the test. After reading, it looks like I may need to use babel and preloaders (es2015 and react) to accomplish this, is that correct or do I have something else going on here?

2

I don’t think you need to setup babel and preloaders. As long as you have everything setup correctly, you should be able to see the tests. Below is an example of how to setup tests

import { Factory } from 'meteor/dburles:factory';
import { Newsletter } from './newsletter.js';
import { newsletterInsert } from './methods.js';
import { PublicationCollector } from 'meteor/johanbrook:publication-collector';
import { chai, assert, expect } from 'meteor/practicalmeteor:chai';

    describe('methods', () =>{
      let newsLetterId;
      beforeEach(()=> {
        Newsletter.remove({});

        newsLetterId = Factory.create('newsletter', {
          campaignName: 'New2 Test Campaign',
          title: 'Factory title',
          url: 'https://google.com',
          description: 'this is the description'
        })._id;
      });

      describe('it inserts newsletter', ()=> {
        it('should have two newsletters', ()=> {
          newsletterInsert._execute({}, {
            campaignName: 'New Test Campaign',
            title: 'newsletter title',
            url: 'https://google.com',
            description: 'this is the description'
          });

          let title = Newsletter.findOne({_id: newsLetterId}).title;

          assert.equal(Newsletter.find().count(),2);
          assert.equal(title, 'Factory title');
        })
      })
    });
3

Thanks for your reply, you are correct, I didn’t need any preloaders. I had some extra lines

import { Meteor } from 'meteor/meteor'

import { resetDatabase } from 'meteor/xolvio:cleaner'
import { Random } from 'meteor/random' // Can use like  const userId = Random.id()
import { chai } from 'meteor/practicalmeteor:chai';
import { Factory } from 'meteor/factory'

// import './client/prospects/ProspectForm.jsx'

describe('ProspectForm', () => {
  it('should render', () => {
  })
})

I removed the import calls

import { Meteor } from 'meteor/meteor'

import { resetDatabase } from 'meteor/xolvio:cleaner'
import { Random } from 'meteor/random' // Can use like  const userId = Random.id()
import { chai } from 'meteor/practicalmeteor:chai';
import { Factory } from 'meteor/factory'

And it showed up. Thanks again