Unit Testing on client side withTracker component

help
1

Hi everyone, so i’ve been stuck for several days on an issue while implementing Unit Testing and Integration testing in a large production application that was built in Meteor/React tech stack. I am using the meteortesting:mocha package as recommended by the meteor documentation and enzyme.

The issue i am having is that i am not really grasping how i can mock the withTracker functionality. I am trying to use our dev database as the source for the test users and mock data. All of the props are generated in the tracker and then sent to the component it wraps. (Code sample below). Another issue i am having is that we are using meteor:universe for i18n internationalization. When mounting the component it shows plain text instead of the translated content. Wondering if there’s a work around. Thanks in advance!

Component I am testing:

import React, { useState } from "react";
import ABCComponent from "./ABCComponent";
import XYZ from "./XYZComponent";
import * as ROUTE_CONSTANTS from "../../global/RoutesConstants";
import { withRouter } from "react-router-dom";
import { withTracker } from "meteor/react-meteor-data";
import UserAssessments from "../../collections/UserAssessments";
import moment from "moment-timezone";
import { i18n } from "meteor/universe:i18n";

const SortDashboard = (props) => {
  const [isSkillsSort, setIsSkillSort] = useState(true);

  return (
   <div>
       {/* Contains some logic to set 'isSetSkillSort' state true or false (business logic hidden for security purposes*/}
      {isSkillsSort ? (
        <ABCComponent user={props.user} skillsSorts={props.skillsSorts} employeeList={props.directReportEmp} />
      ) : (
        <XYZComponent
          user={props.user}
          importanceSorts={props.importanceSorts}
          employeeList={props.directReportEmp}
        />
      )}
    </div>
  );
};

const SortDashboardTracker = withTracker((props) => {
  if (!props.user) return {};

  const abcSubscription = Meteor.subscribe("abcSubscription");

  if (abcSubscription.ready()) {
    const rawData = UserAssessments.find(
      { "assessor._id": Meteor.user().profile._id },
      { sort: { updatedDate: -1 } }
    ).fetch();

    rawData.forEach((assessment) => {
        //Do Something (business logic hidden for security purposes)
    });
  }

  const xyzSubscription = Meteor.subscribe("xyzSubscription");

  let directReportEmp = [];

  if (xyzSubscription.ready()) {
    directReportEmp = Meteor.users.find({ "profile.managerId": Meteor.user().username }).fetch();
  }

  return { importanceSorts, skillsSorts, directReportEmp };
})(SortDashboard);

export default withRouter(SortDashboardTracker);

My Test:

import {Meteor} from 'meteor/meteor';
import React from 'react';
import chai from 'chai';
import sinon, { mock } from 'sinon'
import {mount, shallow, configure, render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {mockManager,mockEmp1,mockEmp2,mockEmp3,mockUser} from '../../mockUsers'
import SortDashboard from '../../../../imports/components/cllWizard/SortDashboard';
import { withRouter, BrowserRouter as Router } from "react-router-dom";

configure({adapter: new Adapter()});
if (Meteor.isClient) {
    describe('WizardComponent', ()=> {
        //let returnedText
         //importing the mock user we created for testing purposes
         const currentUser = mockUser
         let props = {user: currentUser}
         beforeEach(() => {
 
             // now Meteor.user() will return the user we just imported
             sinon.stub(Meteor, 'user');
             Meteor.user.returns(currentUser);
 
             // needed in methods
             sinon.stub(Meteor, 'userId');
             Meteor.userId.returns(currentUser._id); 
         });
 
         //afterEach specifies that we want to restore the user after running the test
         afterEach(() => {
             Meteor.user.restore();
             Meteor.userId.restore();
         });

        it('CLIENT: should render the Sort Dashboard', () => {
            const wrapper = mount(<Router><SortDashboard.WrappedComponent {...props}/></Router>)
            console.log(wrapper.debug())
        });
    });
}

TLDR;

  • Need to test a client side component that uses withTracker and withRouter
  • Need to be able to see the translated text from meteor:universe:i18n in the test
  • Pulling mock data from the db instead of manually creating it.

The issue may very well be my approach and lack of understanding. Please correct me where-ever necessary. Thanks in advance!