Test package with mocha + enzyme in meteor 1.9

help
1

I am trying to test my package with this command:

meteor test-packages ./ --port=5000 --driver-package meteortesting:mocha

This is my package.js configuration:

Package.onTest((api) => {
  api.use('webapps:handler');
  api.use('ecmascript');
  api.use('meteortesting:mocha');
  api.addFiles('./src/pages/App.test.js');
});

and this is my test:

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { expect } from 'chai';
// import { shallow } from 'enzyme';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() })

if (Meteor.isClient) {
  import App from './App';
  import WebappForm from '../components/WebappForm';
  import WebappsList from '../components/WebappsList';

  describe('webapps-handler/src/pages/App.js', () => {
    it('should render', () => {
      console.log('hello');
      const wrapper = shallow(<App />);
      const WebappFormComponent = wrapper.find(WebappForm);
      // expect(WebappFormComponent).to.have.lengthOf(1);
      expect(WebappFormComponent).to.be.present();
      // expect(WebappFormComponent.props().doc).to.equals();

      const WebappsListComponent = wrapper.find(WebappsList);
      expect(WebappsListComponent).to.be.present();
    });
  });
}

But when I run the test I got this error:

Error: Cannot find module 'enzyme'

Please, am I missing something?

I installed mocha like so:

 meteor add meteortesting:mocha
2

Did you run meteor npm install enzyme?

3

Sorry, I thought I did it. But now I am getting this error:
(I know this is off topic)

Error: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `object`.
    at ReactShallowRenderer.render (packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:210627:15)
    at http://172.21.19.91:5000/packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:209066:35
    at withSetStateAllowed (packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:212656:16)
    at Object.render (packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:209065:68)
    at new ShallowWrapper (packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:183047:22)
    at shallow (packages/modules.js?hash=3d8d628e8be76ec915df71a0546c5dbe58532b96:185191:10)
    at Context.<anonymous> (packages/local-test_webapps_handler.js?hash=5615cdba5242001df9e94bed39d52bffef5d58bb:96:23)
    at callFn (packages/meteortesting_mocha-core.js?hash=855fb2ced724faa840b048ae4fa86fb21cad4ba0:15931:21)
    at Test.Runnable.run (packages/meteortesting_mocha-core.js?hash=855fb2ced724faa840b048ae4fa86fb21cad4ba0:15918:7)
    at Runner.runTest (packages/meteortesting_mocha-core.js?hash=855fb2ced724faa840b048ae4fa86fb21cad4ba0:16585:10)
4

What’s App.js’s default export?

5

This is the code for App.js

import { useTracker } from ......xxx..............
import React, { useState } from 'react';
import { Header, Container, Segment } from 'semantic-ui-react';
import { I18n } from .....xxx.......

import Webapps from '../collections/Webapps';
import WebappForm from '../components/WebappForm';
import WebappsList from '../components/WebappsList';

const App = () => {
  const [doc, setDoc] = useState({
    name: '',
    url: '',
    mode: 'presentation',
  });

  const [edit, setEdit] = useState(false);

  const { loading, webappsList } = useTracker(() => {
    const handle = Meteor.subscribe('/webapps/find');
    const loading = Meteor.userId() && !handle.ready();
    const webappsList = Webapps.find().fetch();
    return { loading, webappsList };
  });

  const handleSave = () => {
    if (edit) {
      Meteor.call('/webapps/update', {
        _id: doc._id,
        doc: { ...doc },
      });
    } else {
      Meteor.call('/webapps/insert', { doc: { ...doc } });
    }
  };

  const handleEdit = doc => {
    setDoc({ ...doc });
    setEdit(true);
  };

  const handleRemove = _id => {
    Meteor.call('/webapps/remove', { _id });
  };

  const handleClear = () => {
    setEdit(false);
    setDoc({
      name: '',
      url: '',
      mode: 'presentation',
    });
  };

  return (
    <Segment>
      <Header as="h2" icon textAlign="center">
        <Header.Content>{I18n.t('Title')}</Header.Content>
      </Header>
      <Container>
        <WebappForm
          doc={doc}
          setDoc={setDoc}
          handleSave={handleSave}
          handleClear={handleClear}
        />
        <WebappsList
          webappsList={webappsList}
          handleEdit={handleEdit}
          handleRemove={handleRemove}
        />
      </Container>
    </Segment>
  );
};

export default App;
6

Try const wrapper = shallow(<App />).shallow()

7

No, it did not work either :frowning:

8

@lmendivil - did u ever figure this out?