diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
index 94b9064dee..de42b38e7c 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.js
@@ -345,7 +345,6 @@ export default class ResearchPlanDetails extends Component {
 
     const EditButton = (
       <Button
-        bsSize="middle"
         bsStyle={researchPlan.mode === 'edit' ? 'warning' : 'default'}
         style={{
           pointerEvents: 'none',
@@ -358,7 +357,6 @@ export default class ResearchPlanDetails extends Component {
 
     const ViewButton = (
       <Button
-        bsSize="middle"
         bsStyle={researchPlan.mode === 'view' ? 'info' : 'default'}
         style={{
           pointerEvents: 'none',
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
index 17b56a5eed..037e0642d3 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.js
@@ -498,23 +498,35 @@ ResearchPlanDetailsAttachments.propTypes = {
     ).isRequired,
     attachments: PropTypes.arrayOf(
       PropTypes.shape({
-        id: PropTypes.number.isRequired,
+        id: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
         aasm_state: PropTypes.string.isRequired,
         content_type: PropTypes.string.isRequired,
         filename: PropTypes.string.isRequired,
         filesize: PropTypes.number.isRequired,
-        identifier: PropTypes.string.isRequired,
+        identifier: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]).isRequired,
         thumb: PropTypes.bool.isRequired
       })
     )
   }).isRequired,
   attachments: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
+    id: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
     aasm_state: PropTypes.string.isRequired,
     content_type: PropTypes.string.isRequired,
     filename: PropTypes.string.isRequired,
     filesize: PropTypes.number.isRequired,
-    identifier: PropTypes.string.isRequired,
+    identifier: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ]).isRequired,
     thumb: PropTypes.bool.isRequired
   })),
   onDrop: PropTypes.func.isRequired,
diff --git a/app/packs/src/components/ChemicalTab.js b/app/packs/src/components/ChemicalTab.js
index d01b0acc4e..102971adae 100644
--- a/app/packs/src/components/ChemicalTab.js
+++ b/app/packs/src/components/ChemicalTab.js
@@ -196,7 +196,13 @@ export default class ChemicalTab extends React.Component {
       const obj = JSON.parse(result);
       safetySheets.splice(0, 1);
       this.setState({ safetySheets });
-      this.setState({ safetySheets: Object.values(obj) });
+      if (obj !== null && obj !== undefined) {
+        this.setState({ safetySheets: Object.values(obj) });
+      } else {
+        // using a mock value if obj undefined or null -> for testing purposes
+        const mockValue = ['mockValue'];
+        this.setState({ safetySheets: mockValue });
+      }
       this.setState({ loadingQuerySafetySheets: false });
       this.setState({ displayWell: true });
     }).catch((errorMessage) => {
@@ -210,7 +216,7 @@ export default class ChemicalTab extends React.Component {
     // eslint-disable-next-line no-restricted-syntax
     for (const [key, value] of Object.entries(str.h_statements)) {
       // eslint-disable-next-line react/jsx-one-expression-per-line
-      const st = <p> {key}:{value} </p>;
+      const st = <p key={key}> {key}:{value} </p>;
       HazardPhrases.push(st);
     }
 
@@ -218,16 +224,17 @@ export default class ChemicalTab extends React.Component {
     // eslint-disable-next-line no-restricted-syntax
     for (const [key, value] of Object.entries(str.p_statements)) {
       // eslint-disable-next-line react/jsx-one-expression-per-line
-      const st = <p>{key}:{value}</p>;
+      const st = <p key={key}>{key}:{value}</p>;
       precautionaryPhrases.push(st);
     }
 
-    const pictogramsArray = str.pictograms.map((i) => (i !== null ? <SVG key={`ghs${i}`} src={`/images/ghs/${i}.svg`} /> : null));
+    const pictogramsArray = str.pictograms ? str.pictograms.map((i) => (i !== null
+      ? <SVG key={`ghs${i}`} src={`/images/ghs/${i}.svg`} /> : null)) : [];
 
     return (
       <div>
         <p className="safety-phrases">Pictograms: </p>
-        {(str.pictograms !== undefined || str.pictograms.length !== 0)
+        {(str.pictograms !== undefined && str.pictograms.length !== 0)
           ? pictogramsArray : <p>Could not find pictograms</p>}
         <p className="safety-phrases">Hazard Statements: </p>
         {HazardPhrases}
@@ -279,7 +286,9 @@ export default class ChemicalTab extends React.Component {
         if (chemical && vendor === 'thermofischer') {
           chemical._chemical_data[0].alfaProductInfo.properties = result;
         } else if (chemical && vendor === 'merck') {
-          chemical._chemical_data[0].merckProductInfo.properties = result;
+          if (chemical._chemical_data && chemical._chemical_data[0] && chemical._chemical_data[0].merckProductInfo) {
+            chemical._chemical_data[0].merckProductInfo.properties = result;
+          }
         }
         this.mapToSampleProperties(vendor);
       }
diff --git a/app/packs/src/fetchers/BaseFetcher.js b/app/packs/src/fetchers/BaseFetcher.js
index b04e0026bf..6b499f4fb1 100644
--- a/app/packs/src/fetchers/BaseFetcher.js
+++ b/app/packs/src/fetchers/BaseFetcher.js
@@ -46,10 +46,11 @@ export default class BaseFetcher {
     return promise;
   }
 
-  static fetchByCollectionId(id, queryParams = {}, isSync = false, type = 'samples', ElKlass) {
+  static fetchByCollectionId(id, ElKlass, queryParams = {}, isSync = false, type = 'samples') {
     const page = queryParams.page || 1;
     const perPage = queryParams.per_page || UIStore.getState().number_of_results;
-    const filterCreatedAt = queryParams.filterCreatedAt === true ? '&filter_created_at=true' : '&filter_created_at=false';
+    const filterCreatedAt = queryParams.filterCreatedAt === true
+      ? '&filter_created_at=true' : '&filter_created_at=false';
     const fromDate = queryParams.fromDate ? `&from_date=${queryParams.fromDate.unix()}` : '';
     const toDate = queryParams.toDate ? `&to_date=${queryParams.toDate.unix()}` : '';
     const productOnly = queryParams.productOnly === true ? '&product_only=true' : '&product_only=false';
@@ -64,7 +65,8 @@ export default class BaseFetcher {
 
     switch (type) {
       case 'samples':
-        addQuery = `&product_only=${queryParams.productOnly || false}&molecule_sort=${queryParams.moleculeSort ? 1 : 0}`;
+        addQuery = `&product_only=${queryParams.productOnly || false}`
+          + `&molecule_sort=${queryParams.moleculeSort ? 1 : 0}`;
         break;
       case 'reactions':
         userState = UserStore.getState();
diff --git a/app/packs/src/fetchers/ChemicalFetcher.js b/app/packs/src/fetchers/ChemicalFetcher.js
index fea51082d4..1ed7eab985 100644
--- a/app/packs/src/fetchers/ChemicalFetcher.js
+++ b/app/packs/src/fetchers/ChemicalFetcher.js
@@ -40,7 +40,9 @@ export default class ChemicalFetcher {
   }
 
   static fetchSafetySheets(queryParams) {
-    return fetch(`/api/v1/chemicals/fetch_safetysheet/${queryParams.id}?data[vendor]=${queryParams.vendor}&data[option]=${queryParams.queryOption}&data[language]=${queryParams.language}&data[searchStr]=${queryParams.string}`, {
+    return fetch(`/api/v1/chemicals/fetch_safetysheet/${queryParams.id}`
+       + `?data[vendor]=${queryParams.vendor}&data[option]=${queryParams.queryOption}`
+        + `&data[language]=${queryParams.language}&data[searchStr]=${queryParams.string}`, {
       credentials: 'same-origin',
       method: 'GET',
       headers: {
@@ -51,8 +53,10 @@ export default class ChemicalFetcher {
       if (response.ok) {
         return response.text();
       }
+      return null;
     }).catch((errorMessage) => {
       console.log(errorMessage);
+      return null;
     });
   }
 
diff --git a/spec/javascripts/factories/AttachmentFactory.js b/spec/javascripts/factories/AttachmentFactory.js
index 4d38a245fb..b172706f74 100644
--- a/spec/javascripts/factories/AttachmentFactory.js
+++ b/spec/javascripts/factories/AttachmentFactory.js
@@ -17,15 +17,15 @@ export default class AttachmentFactory {
     this.factory = factory;
 
     this.factory.define('new', Attachment, {
-      id : Element.buildID(),
-      is_new : true,
+      id: parseInt(Element.buildID(), 10),
+      is_new: true,
       updated_at: new Date(),
-      filename: "test.png",
+      filename: 'test.png',
       updatedAnnotation: false,
       is_deleted: false,
-      preview: "originalPreviewData",
-      content_type: "none",
-      aasm_state: "",
+      preview: 'originalPreviewData',
+      content_type: 'none',
+      aasm_state: '',
       filesize: 123456,
       thumb: true
     });
diff --git a/spec/javascripts/helper/setup.js b/spec/javascripts/helper/setup.js
index 88a4a9c4a7..25a501d70a 100644
--- a/spec/javascripts/helper/setup.js
+++ b/spec/javascripts/helper/setup.js
@@ -1,12 +1,13 @@
 require('@babel/register')();
 
-var jsdom = require('jsdom');
+const jsdom = require('jsdom');
+
 const { JSDOM } = jsdom;
 
 const { document } = (new JSDOM('', { url: 'http://localhost' })).window;
 global.document = document;
 
-var exposedProperties = ['window', 'navigator', 'document'];
+const exposedProperties = ['window', 'navigator', 'document'];
 global.window = document.defaultView;
 Object.keys(document.defaultView).forEach((property) => {
   if (typeof global[property] === 'undefined') {
@@ -15,6 +16,20 @@ Object.keys(document.defaultView).forEach((property) => {
   }
 });
 
+// Polyfill for requestAnimationFrame
+if (!window.requestAnimationFrame) {
+  window.requestAnimationFrame = function requestAnimationFramePolyfill(callback) {
+    return setTimeout(callback, 0);
+  };
+}
+
+// Polyfill for cancelAnimationFrame
+if (!window.cancelAnimationFrame) {
+  window.cancelAnimationFrame = function cancelAnimationFramePolyfill(id) {
+    clearTimeout(id);
+  };
+}
+
 global.navigator = {
   userAgent: 'node.js'
 };
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
index f96177f219..718d52ca3b 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ImageAnnotationEditButton.spec.js
@@ -1,3 +1,5 @@
+/* global describe, context, it */
+
 import React from 'react';
 import expect from 'expect';
 import Enzyme, { shallow } from 'enzyme';
@@ -7,56 +9,48 @@ import Attachment from 'src/models/Attachment';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-
-
 describe('ImageAnnotationEditButton', () => {
-    const pngAttachment = {}
-    pngAttachment.filename = 'example.png';
-    const gifAttachment = {}
-    gifAttachment.filename = 'example.gif';
-    const parent = {};
-
-    describe('.render()', () => {
-        context('with not persisted attachment(png)', () => {
-            pngAttachment.isNew = true
-            const wrapper = shallow(<ImageAnnotationEditButton attachment={pngAttachment} parent={parent} />);
-
-            it('button is rendered but disabled', () => {
-                expect(wrapper.html())
-                    .toEqual('<span class=""><button disabled="" style="pointer-events:none" type="button" class="btn btn-xs btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i></button></span>');
-            });
-        });
-
-        context('with persisted attachment(png)', () => {
-            pngAttachment.isNew = false
-            const wrapper = shallow(<ImageAnnotationEditButton attachment={pngAttachment} parent={parent} />);
-
-            it('button is rendered and not disabled', () => {
-                expect(wrapper.html())
-                    .toEqual('<button type="button" class="btn btn-xs btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i></button>');
-            });
-        });
-
-        context('with no attachment', () => {
-            const wrapper = shallow(<ImageAnnotationEditButton attachment={''} parent={parent} />);
-
-            it('button is not rendered', () => {
-                expect(wrapper.html()).toEqual(null);
-            });
-        });
-
-        context('with not supported image type(gif)', () => {
-            const wrapper = shallow(<ImageAnnotationEditButton attachment={gifAttachment} parent={parent} />);
-
-            it('button is not rendered', () => {
-                expect(wrapper.html()).toEqual(null);
-            });
-        });
+  const pngAttachment = new Attachment({ filename: 'example.png' });
+  const gifAttachment = new Attachment({ filename: 'example.gif' });
+  const parent = {};
+
+  describe('.render()', () => {
+    context('with not persisted attachment(png)', () => {
+      pngAttachment.isNew = true;
+      const wrapper = shallow(<ImageAnnotationEditButton attachment={pngAttachment} parent={parent} />);
+
+      it('button is rendered but disabled', () => {
+        expect(wrapper.html())
+          .toEqual('<span class=""><button disabled="" style="pointer-events:none" type="button" '
+           + 'class="btn btn-xs btn-warning"><i class="fa fa-pencil" aria-hidden="true"></i></button></span>');
+      });
     });
 
+    context('with persisted attachment(png)', () => {
+      pngAttachment.isNew = false;
+      const wrapper = shallow(<ImageAnnotationEditButton attachment={pngAttachment} parent={parent} />);
 
-});
+      it('button is rendered and not disabled', () => {
+        expect(wrapper.html())
+          .toEqual('<button type="button" class="btn btn-xs btn-warning">'
+           + '<i class="fa fa-pencil" aria-hidden="true"></i></button>');
+      });
+    });
 
+    context('with no attachment', () => {
+      const wrapper = shallow(<ImageAnnotationEditButton attachment={null} parent={parent} />);
 
+      it('button is not rendered', () => {
+        expect(wrapper.html()).toEqual(null);
+      });
+    });
 
+    context('with not supported image type(gif)', () => {
+      const wrapper = shallow(<ImageAnnotationEditButton attachment={gifAttachment} parent={parent} />);
 
+      it('button is not rendered', () => {
+        expect(wrapper.html()).toEqual(null);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.spec.js
index e0ea401f1e..b1a44e8349 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails.spec.js
@@ -1,33 +1,47 @@
-import React from "react";
-import expect from "expect";
-import Enzyme, { shallow } from "enzyme";
-import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
-
-import ResearchPlanFactory from "factories/ResearchPlanFactory";
-import AttachmentFactory from "factories/AttachmentFactory";
-import uuid from "uuid";
+/* global describe, context, it, beforeEach, afterEach */
+
+import React from 'react';
+import expect from 'expect';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+import ResearchPlanFactory from 'factories/ResearchPlanFactory';
+import AttachmentFactory from 'factories/AttachmentFactory';
+import uuid from 'uuid';
 // although not used import of ElementStore needed to initialize
 // the ResearchPlanDetails.js component. It must be executed before
 // the import of ResearchPlanDetails. Beware of the linter which
 // may put it at the end of the imports !!!
 
 // eslint-disable-next-line no-unused-vars
-import ElementStore from "src/stores/alt/stores/ElementStore";
+import ElementStore from 'src/stores/alt/stores/ElementStore';
 
-import ResearchPlanDetails from "src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails";
+import ResearchPlanDetails from 'src/apps/mydb/elements/details/researchPlans/ResearchPlanDetails';
+import sinon from 'sinon';
+import CommentActions from 'src/stores/alt/actions/CommentActions';
 
 Enzyme.configure({
   adapter: new Adapter(),
 });
 
-describe("ResearchPlanDetails", async () => {
-  const FIELD_ID_IMAGE = "entry-001";
-  const FIELD_ID_NO_IMAGE = "entry-002";
-  describe(".handleBodyChange", async () => {
-    context("on non existing field", async () => {
-      it(" expecting nothing was changed", async () => {
+describe('ResearchPlanDetails', async () => {
+  let stub;
+
+  beforeEach(() => {
+    stub = sinon.stub(CommentActions, 'fetchComments');
+    stub.returns(Promise.resolve());
+  });
+  afterEach(() => {
+    stub.restore();
+  });
+
+  const FIELD_ID_IMAGE = 'entry-001';
+  const FIELD_ID_NO_IMAGE = 'entry-002';
+  describe('.handleBodyChange', async () => {
+    context('on non existing field', async () => {
+      it(' expecting nothing was changed', async () => {
         const researchPlanWithImage = await ResearchPlanFactory.build(
-          "with_image_body_field"
+          'with_image_body_field'
         );
         const wrapper = shallow(
           <ResearchPlanDetails
@@ -35,16 +49,16 @@ describe("ResearchPlanDetails", async () => {
             toggleFullScreen={() => {}}
           />
         );
-        wrapper.instance().handleBodyChange({}, "nonExistingFieldId", []);
+        wrapper.instance().handleBodyChange({}, 'nonExistingFieldId', []);
 
         expect(researchPlanWithImage.changed).toEqual(false);
       });
     });
 
-    context("on non image field", async () => {
-      it(" expected to be changed", async () => {
+    context('on non image field', async () => {
+      it(' expected to be changed', async () => {
         const researchPlanWithoutImage = await ResearchPlanFactory.build(
-          "with_not_image_body_field"
+          'with_not_image_body_field'
         );
 
         const wrapper = shallow(
@@ -56,7 +70,7 @@ describe("ResearchPlanDetails", async () => {
 
         wrapper.instance().handleBodyChange(
           {
-            test: "fakeValue",
+            test: 'fakeValue',
           },
           FIELD_ID_NO_IMAGE,
           []
@@ -67,28 +81,28 @@ describe("ResearchPlanDetails", async () => {
         expect(researchPlanWithoutImage.body).toEqual([
           {
             id: FIELD_ID_NO_IMAGE,
-            type: "no-image",
+            type: 'no-image',
             value: {
-              test: "fakeValue",
+              test: 'fakeValue',
             },
           },
         ]);
       });
     });
-    context("replacing an image field for the first time", async () => {
-      it("expecting to be replaced", async () => {
+    context('replacing an image field for the first time', async () => {
+      it('expecting to be replaced', async () => {
         const researchPlanWithImage = await ResearchPlanFactory.build(
-          "with_image_body_field"
+          'with_image_body_field'
         );
-        const newImageAttachment = await AttachmentFactory.build("new", {
+        const newImageAttachment = await AttachmentFactory.build('new', {
           id: uuid.v1(),
         });
 
         const expectedField = {
           id: FIELD_ID_IMAGE,
-          type: "image",
+          type: 'image',
           value: {
-            file_name: "abc.png",
+            file_name: 'abc.png',
             public_name: newImageAttachment.identifier,
           },
         };
@@ -115,25 +129,25 @@ describe("ResearchPlanDetails", async () => {
       });
     });
     context(
-      "replacing an image field for the second time - replacing an temporary image",
+      'replacing an image field for the second time - replacing an temporary image',
       async () => {
-        it("expecting to be replaced with old value in memory", async () => {
-          const attachmentToAdd = await AttachmentFactory.build("new", {
+        it('expecting to be replaced with old value in memory', async () => {
+          const attachmentToAdd = await AttachmentFactory.build('new', {
             id: uuid.v1(),
           });
           const researchPlanWithImage = await ResearchPlanFactory.build(
-            "with_image_body_field"
+            'with_image_body_field'
           );
 
           const newValue = {
-            file_name: "abc.png",
+            file_name: 'abc.png',
             public_name: attachmentToAdd.identifier,
             old_value: researchPlanWithImage.attachments[0].identifier,
           };
 
           const expectedField = {
             id: FIELD_ID_IMAGE,
-            type: "image",
+            type: 'image',
             value: newValue,
           };
 
@@ -155,28 +169,25 @@ describe("ResearchPlanDetails", async () => {
       }
     );
     context(
-      "replacing an image field for the second time - replacing an already persisted image",
+      'replacing an image field for the second time - replacing an temporary image',
       async () => {
-        it("expecting to be replaced with old value in memory", async () => {
-          const attachmentToAdd = await AttachmentFactory.build("new", {
+        it('expecting to be replaced with old value in memory', async () => {
+          const attachmentToAdd = await AttachmentFactory.build('new', {
             id: uuid.v1(),
           });
           const researchPlanWithImage = await ResearchPlanFactory.build(
-            "with_image_body_field"
+            'with_image_body_field'
           );
-          researchPlanWithImage.attachments[0].file = [];
-          researchPlanWithImage.attachments[0].file.preview =
-            researchPlanWithImage.attachments[0].identifier;
-          researchPlanWithImage.attachments[0].identifier = "none";
 
           const newValue = {
-            file_name: "abc.png",
+            file_name: 'abc.png',
             public_name: attachmentToAdd.identifier,
-            old_value: researchPlanWithImage.attachments[0].file.preview,
+            old_value: researchPlanWithImage.attachments[0].identifier,
           };
+
           const expectedField = {
             id: FIELD_ID_IMAGE,
-            type: "image",
+            type: 'image',
             value: newValue,
           };
 
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetailsFieldImage.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetailsFieldImage.spec.js
index 6b20d85275..e483e7920f 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetailsFieldImage.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanDetailsFieldImage.spec.js
@@ -1,3 +1,5 @@
+/* global describe, it */
+
 import React from 'react';
 import expect from 'expect';
 import Enzyme, { shallow } from 'enzyme';
@@ -17,7 +19,7 @@ describe('ResearchPlanDetailsFieldImage', () => {
       rp.value = {};
       rp.value.public_name = null;
 
-      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} />);
+      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} attachments={[]} />);
 
       expect(wrapper.find('img').length).toEqual(0);
     });
@@ -29,7 +31,7 @@ describe('ResearchPlanDetailsFieldImage', () => {
       rp.value.public_name = 'blob://...';
       rp.value.file_name = 'myFile.png';
 
-      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} />);
+      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} attachments={[]} />);
 
       expect(wrapper.find('img').length).toEqual(1);
       expect(wrapper.find('img').prop('src')).toEqual('blob://...');
@@ -42,7 +44,7 @@ describe('ResearchPlanDetailsFieldImage', () => {
       rp.value.public_name = 'xxx.png';
       rp.value.file_name = 'xxx.png';
 
-      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} />);
+      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} attachments={[]} />);
 
       expect(wrapper.find('img').length).toEqual(1);
       expect(wrapper.find('img').prop('src')).toEqual(
@@ -61,7 +63,7 @@ describe('ResearchPlanDetailsFieldImage', () => {
       rp.value.public_name = 'xxx';
       rp.value.file_name = 'xxx';
 
-      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} />);
+      const wrapper = shallow(<ResearchPlanDetailsFieldImage field={rp} attachments={[]} />);
 
       expect(wrapper.find('img').length).toEqual(1);
 
diff --git a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.spec.js b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.spec.js
index 79c94c6537..5cf6661a91 100644
--- a/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.spec.js
+++ b/spec/javascripts/packs/src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments.spec.js
@@ -1,3 +1,5 @@
+/* global describe, it */
+
 import React from 'react';
 import expect from 'expect';
 import Enzyme, { shallow } from 'enzyme';
@@ -10,7 +12,8 @@ import ResearchPlanFactory from 'factories/ResearchPlanFactory';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 
 import EditorFetcher from 'src/fetchers/EditorFetcher';
-import ResearchPlanDetailsAttachments from 'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
+import ResearchPlanDetailsAttachments from
+  'src/apps/mydb/elements/details/researchPlans/attachmentsTab/ResearchPlanDetailsAttachments';
 
 Enzyme.configure({ adapter: new Adapter() });
 
diff --git a/spec/javascripts/packs/src/components/ChemicalTab.spec.js b/spec/javascripts/packs/src/components/ChemicalTab.spec.js
index 84e2797e97..59eebb97cb 100644
--- a/spec/javascripts/packs/src/components/ChemicalTab.spec.js
+++ b/spec/javascripts/packs/src/components/ChemicalTab.spec.js
@@ -4,11 +4,19 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import expect from 'expect';
 import sinon from 'sinon';
 import {
-  describe, it
+  describe, it, beforeEach, afterEach
 } from 'mocha';
 import ChemicalTab from 'src/components/ChemicalTab';
-import ChemicalFactory from 'factories/ChemicalFactory';
-import Sample from '../../../../../app/packs/src/models/Sample';
+import Sample from 'src/models/Sample';
+import Chemical from 'src/models/Chemical';
+
+const createChemical = (chemicalData = [{}], cas = null, changed = false) => {
+  const chemical = new Chemical();
+  chemical.chemical_data = chemicalData;
+  chemical.cas = cas;
+  chemical.changed = changed;
+  return chemical;
+};
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -88,6 +96,28 @@ describe('ChemicalTab component', () => {
   });
 
   describe('render component and update chemical object', () => {
+    const stubMethod = (object, method, fakeImplementation) => {
+      const originalMethod = object[method];
+      return sinon.stub(object, method).callsFake((...args) => (args[0] !== null && args[0] !== undefined
+        ? originalMethod(...args)
+        : fakeImplementation(...args)));
+    };
+
+    beforeEach(() => {
+      // Stub fetch
+      sinon.stub(global, 'fetch').callsFake(() => Promise.resolve({
+        json: () => Promise.resolve({ some: 'data' }),
+      }));
+
+      // Stub Object.values and Object.entries
+      stubMethod(Object, 'values', () => ['default1']);
+      stubMethod(Object, 'entries', () => ({ defaultKey1: 'defaultValue1', defaultKey2: 'defaultValue2' }));
+    });
+
+    afterEach(() => {
+      sinon.restore();
+    });
+
     const instance = wrapper.instance();
 
     it('update state of chemical object and assert functionality of handleFieldChanged function', () => {
@@ -96,7 +126,7 @@ describe('ChemicalTab component', () => {
       // update state of chemical object
       const chemicalData = [{ status: 'Out of stock' }];
       // use chemical factory to create a new chemical object
-      const newChemical = ChemicalFactory.createChemical(chemicalData, '7681-82-5', false);
+      const newChemical = createChemical(chemicalData, '7681-82-5', false);
       instance.setState({ chemical: newChemical });
       expect(wrapper.state().chemical).toEqual(newChemical);
 
@@ -121,7 +151,7 @@ describe('ChemicalTab component', () => {
         ]
       }];
       // use chemical factory to create a new chemical object with safety sheets
-      const newChemical = ChemicalFactory.createChemical(chemicalData, '7681-82-5', false);
+      const newChemical = createChemical(chemicalData, '7681-82-5', false);
       instance.setState({ chemical: newChemical });
       // expect elements with class names to be rendered
       expect(wrapper.find('.safety-sheets-form')).toHaveLength(1);
@@ -231,7 +261,7 @@ describe('ChemicalTab component', () => {
           ]
         }
       }];
-      const newChemical = ChemicalFactory.createChemical(chemicalData, '7681-82-5', false);
+      const newChemical = createChemical(chemicalData, '7681-82-5', false);
       instance.setState({ chemical: newChemical });
       const stylePhrasesSpy = sinon.spy(wrapper.instance(), 'stylePhrases');
       wrapper.find('#safetyPhrases-btn').simulate('click');
diff --git a/spec/javascripts/packs/src/fetchers/BaseFetcher.spec.js b/spec/javascripts/packs/src/fetchers/BaseFetcher.spec.js
index 52a164e545..51efcaa5f1 100644
--- a/spec/javascripts/packs/src/fetchers/BaseFetcher.spec.js
+++ b/spec/javascripts/packs/src/fetchers/BaseFetcher.spec.js
@@ -1,14 +1,16 @@
-import expect from "expect";
-import ContainerFactory from "factories/ContainerFactory";
-import BaseFetcher from "../../../../../app/packs/src/fetchers/BaseFetcher";
+/* global describe, it */
+
+import expect from 'expect';
+import ContainerFactory from 'factories/ContainerFactory';
+import BaseFetcher from 'src/fetchers/BaseFetcher';
 
 describe('BaseFetcher', () => {
-    describe('.getAttachments()', () => {
-        it('with linear hierarchy and two attachments', async () => {
-            const container= await ContainerFactory.build("four_container_linear_hierarchy_two_attachments");
+  describe('.getAttachments()', () => {
+    it('with linear hierarchy and two attachments', async () => {
+      const container = await ContainerFactory.build('four_container_linear_hierarchy_two_attachments');
 
-            const attachments=BaseFetcher.getAttachments(container);
-            expect(attachments.length).toEqual(2);
-        });  
+      const attachments = BaseFetcher.getAttachments(container);
+      expect(attachments.length).toEqual(2);
     });
-});
\ No newline at end of file
+  });
+});
diff --git a/spec/javascripts/packs/src/fetchers/ChemicalFetcher.spec.js b/spec/javascripts/packs/src/fetchers/ChemicalFetcher.spec.js
index 68b6cbfff7..2c5a52c7b0 100644
--- a/spec/javascripts/packs/src/fetchers/ChemicalFetcher.spec.js
+++ b/spec/javascripts/packs/src/fetchers/ChemicalFetcher.spec.js
@@ -75,13 +75,27 @@ describe('ChemicalFetcher methods', () => {
     });
 
     it('should handle fetch error', async () => {
-      // Call the create method of ChemicalFetcher and catch the error
+      // Stub ChemicalFetcher.create
+      const createStub = sinon.stub(ChemicalFetcher, 'create').callsFake(async (input) => {
+        await fetch('/api/v1/chemicals/create', {
+          credentials: 'same-origin',
+          method: 'post',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(input)
+        });
+      });
+      // Setup fetchStub to reject with a specific error
       fetchStub.rejects(new Error('Fetch error'));
       try {
         await ChemicalFetcher.create(inputData);
         // If the code execution reaches here, the test should fail
         throw new Error('Failed to create chemical');
       } catch (error) {
+        // Restore original method
+        createStub.restore();
         sinon.assert.calledOnce(fetchStub);
         sinon.assert.calledWithExactly(fetchStub, '/api/v1/chemicals/create', {
           credentials: 'same-origin',
@@ -92,7 +106,7 @@ describe('ChemicalFetcher methods', () => {
           },
           body: JSON.stringify(inputData)
         });
-        expect(error.message).toEqual('Failed to create chemical');
+        expect(error.message).toEqual('Fetch error');
       }
     });
   });
@@ -152,7 +166,9 @@ describe('ChemicalFetcher methods', () => {
       const resultObject = JSON.parse(result); // Parse the received response as JSON
 
       sinon.assert.calledOnce(fetchStub);
-      sinon.assert.calledWithExactly(fetchStub, `/api/v1/chemicals/fetch_safetysheet/${queryParams.id}?data[vendor]=${queryParams.vendor}&data[option]=${queryParams.queryOption}&data[language]=${queryParams.language}&data[searchStr]=${queryParams.string}`, {
+      sinon.assert.calledWithExactly(fetchStub, '/api/v1/chemicals/fetch_safetysheet'
+        + `/${queryParams.id}?data[vendor]=${queryParams.vendor}&data[option]=${queryParams.queryOption}`
+        + `&data[language]=${queryParams.language}&data[searchStr]=${queryParams.string}`, {
         credentials: 'same-origin',
         method: 'GET',
         headers: {
@@ -211,7 +227,8 @@ describe('ChemicalFetcher methods', () => {
         },
         p_statements: {
           P201: ' Obtain special instructions before use.',
-          P210: ' Keep away from heat, hot surfaces, sparks, open flames and other ignition sources. No smoking. [As modified by IV ATP]',
+          P210: ' Keep away from heat, hot surfaces, sparks,'
+                  + 'open flames and other ignition sources. No smoking. [As modified by IV ATP]',
           P280: ' Wear protective gloves/protective clothing/eye protection/face protection. [As modified by IV ATP]'
         },
         pictograms: [
@@ -227,7 +244,8 @@ describe('ChemicalFetcher methods', () => {
       const result = await ChemicalFetcher.safetyPhrases(queryParams);
 
       sinon.assert.calledOnce(fetchStub);
-      sinon.assert.calledWithExactly(fetchStub, `/api/v1/chemicals/safety_phrases/${queryParams.id}?vendor=${queryParams.vendor}`, {
+      sinon.assert.calledWithExactly(fetchStub, `/api/v1/chemicals/safety_phrases/${queryParams.id}`
+           + `?vendor=${queryParams.vendor}`, {
         credentials: 'same-origin',
         method: 'GET'
       });