1

I created a new project with create-react-library. I am trying to add a unit test using Jest and Enzyme. My test works for a simple component, but Jest fails to test a component that references semantic-ui-react.

This test works:

// src/VanillaComponent.test.js
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

const VanillaComponent = () => <div>Test</div>;

test('Enzyme can render a vanilla component', () => {
  expect(shallow(<VanillaComponent />)).toBeDefined();
});

This test does not work:

// src/SemanticComponent.test.js
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Button } from 'semantic-ui-react';

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

const SemanticComponent = () => <Button>Test</Button>;

test('Enzyme can render a semantic-ui-react component', () => {
  expect(shallow(<SemanticComponent />)).toBeDefined();
});

When I run npm test on the test above, I get the following error:

 ● Test suite failed to run

    Cannot find module 'semantic-ui-react' from 'SemanticComponent.test.js'

   > 4 | import { Button } from 'semantic-ui-react';
        | ^

Relevant parts of package.json file (lots of unrelated content removed):

{
  "scripts": {
    "test": "run-s test:unit test:lint test:build",
    "test:build": "run-s build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom"
  },
  "peerDependencies": {
    "react": "^16.0.0",
    "semantic-ui-react": "^0.88.2"
  },
  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
}

How can I get this second test to run? Am I missing some Jest configuration?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
srk
  • 1,625
  • 1
  • 10
  • 26
  • Just had to look up `create-react-library` and see it is for creating libraries, so then I thought, yeah, maybe `semantic-ui` isn't installed where the test is running and wanted to ask to see your package.json file and see it is listed as peer dependency as opposed to a regular or dev dependency. It may need to also be a regular dependency. – Drew Reese Jun 19 '20 at 04:26
  • I observed the same behavior with `create-react-app`. (I discovered that after my original post, otherwise I would have referenced CRA since that is more commonly-used.) – srk Jun 19 '20 at 12:37

1 Answers1

1

The problem was that I referenced semantic-ui-react as a peer dependency in the package.json file. I found this answer which led me to add semantic-ui-react as both a peer dependency and a dev dependency. After making that change, the test works fine.

This solution does not feel super clean to me, but I don't anticipate any problems, so I will go with this approach for now.

srk
  • 1,625
  • 1
  • 10
  • 26