react: trying to get enzyme and mobx tests working

public/app/containers/AlertRuleList/AlertRuleList.jest.tsx

+import React from 'react';
+// import renderer from 'react-test-renderer';
+import moment from 'moment';
+import { AlertRuleList, AlertRuleItem } from './AlertRuleList';
+import { RootStore } from 'app/stores/RootStore';
+import { backendSrv, createNavTree } from 'test/mocks/common';
+import { shallow } from 'enzyme';
+
+describe('AlertRuleList', () => {
+  let page, store;
+
+  beforeAll(done => {
+    backendSrv.get.mockReturnValue(
+      Promise.resolve([
+        {
+          id: 11,
+          dashboardId: 58,
+          panelId: 3,
+          name: 'Panel Title alert',
+          state: 'ok',
+          newStateDate: moment()
+            .subtract(5, 'minutes')
+            .format(),
+          evalData: {},
+          executionError: '',
+          dashboardUri: 'db/mygool',
+        },
+      ])
+    );
+
+    store = RootStore.create(
+      {},
+      {
+        backendSrv: backendSrv,
+        navTree: createNavTree('alerting', 'alert-list'),
+      }
+    );
+
+    page = shallow(<AlertRuleList store={store} />)
+      .first()
+      .shallow();
+    setTimeout(done, 100);
+    //page = renderer.create(<AlertRuleList store={store} />);
+  });
+
+  it('should call api to get rules', () => {
+    expect(backendSrv.get.mock.calls[0][0]).toEqual('/api/alerts');
+  });
+
+  it('should render 1 rule', () => {
+    console.log(page.find('.card-section').debug());
+    expect(page.find(AlertRuleItem)).toHaveLength(1);
+  });
+});

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -25,19 +25,21 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> {
   constructor(props) {
     super(props);
 
-    const store = this.props.store;
-
-    store.nav.load('alerting', 'alert-list');
-    store.alertList.setStateFilter(store.view.query.get('state') || 'all');
-    store.alertList.loadRules();
+    this.props.store.nav.load('alerting', 'alert-list');
+    this.fetchRules();
   }
 
   onStateFilterChanged = evt => {
-    this.props.store.alertList.setStateFilter(evt.target.value);
     this.props.store.view.updateQuery({ state: evt.target.value });
-    this.props.store.alertList.loadRules();
+    this.fetchRules();
   };
 
+  fetchRules() {
+    this.props.store.alertList.loadRules({
+      state: this.props.store.view.query.get('state') || 'all',
+    });
+  }
+
   onOpenHowTo = () => {
     appEvents.emit('show-modal', {
       src: 'public/app/features/alerting/partials/alert_howto.html',
@@ -48,6 +50,7 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> {
 
   render() {
     const { nav, alertList } = this.props.store;
+    console.log('render', alertList.rules.length);
 
     return (
       <div>

public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertRuleList should render page 1`] = `
+<div>
+  <div
+    className="page-header-canvas"
+  >
+    <div
+      className="page-container"
+    >
+      <div
+        className="page-header"
+      >
+        <div
+          className="page-header__inner"
+        >
+          <span
+            className="page-header__logo"
+          >
+            
+            
+          </span>
+          <div
+            className="page-header__info-block"
+          >
+            <h1
+              className="page-header__title"
+            >
+              alerting-Text
+            </h1>
+            
+          </div>
+        </div>
+        <nav>
+          <div
+            className="gf-form-select-wrapper width-20 page-header__select-nav"
+          >
+            <label
+              className="gf-form-select-icon "
+              htmlFor="page-header-select-nav"
+            />
+            <select
+              className="gf-select-nav gf-form-input"
+              defaultValue="/url/alert-list"
+              id="page-header-select-nav"
+              onChange={[Function]}
+            >
+              <option
+                value="/url/alert-list"
+              >
+                alert-list-Text
+              </option>
+            </select>
+          </div>
+          <ul
+            className="gf-tabs page-header__tabs"
+          >
+            <li
+              className="gf-tabs-item"
+            >
+              <a
+                className="gf-tabs-link active"
+                href="/url/alert-list"
+                target={undefined}
+              >
+                <i
+                  className=""
+                />
+                alert-list-Text
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+  <div
+    className="page-container page-body"
+  >
+    <div
+      className="page-action-bar"
+    >
+      <div
+        className="gf-form"
+      >
+        <label
+          className="gf-form-label"
+        >
+          Filter by state
+        </label>
+        <div
+          className="gf-form-select-wrapper width-13"
+        >
+          <select
+            className="gf-form-input"
+            onChange={[Function]}
+            value="all"
+          >
+            <option
+              value="all"
+            >
+              All
+            </option>
+            <option
+              value="ok"
+            >
+              OK
+            </option>
+            <option
+              value="not_ok"
+            >
+              Not OK
+            </option>
+            <option
+              value="alerting"
+            >
+              Alerting
+            </option>
+            <option
+              value="no_data"
+            >
+              No Data
+            </option>
+            <option
+              value="paused"
+            >
+              Paused
+            </option>
+          </select>
+        </div>
+      </div>
+      <div
+        className="page-action-bar__spacer"
+      />
+      <a
+        className="btn btn-secondary"
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-info-circle"
+        />
+         How to add an alert
+      </a>
+    </div>
+    <section
+      className="card-section card-list-layout-list"
+    >
+      <ol
+        className="card-list"
+      >
+        <li
+          className="card-item-wrapper"
+        >
+          <div
+            className="card-item card-item--alert"
+          >
+            <div
+              className="card-item-header"
+            >
+              <div
+                className="card-item-type"
+              >
+                <a
+                  className="card-item-cog"
+                  onClick={[Function]}
+                  title="Pausing an alert rule prevents it from executing"
+                >
+                  <i
+                    className="fa fa-pause"
+                  />
+                </a>
+                <a
+                  className="card-item-cog"
+                  href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
+                  title="Edit alert rule"
+                >
+                  <i
+                    className="icon-gf icon-gf-settings"
+                  />
+                </a>
+              </div>
+            </div>
+            <div
+              className="card-item-body"
+            >
+              <div
+                className="card-item-details"
+              >
+                <div
+                  className="card-item-name"
+                >
+                  <a
+                    href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
+                  >
+                    Panel Title alert
+                  </a>
+                </div>
+                <div
+                  className="card-item-sub-name"
+                >
+                  <span
+                    className="alert-list-item-state alert-state-ok"
+                  >
+                    <i
+                      className="icon-gf icon-gf-online"
+                    />
+                     
+                    OK
+                  </span>
+                  <span>
+                     for 
+                    5 minutes
+                  </span>
+                </div>
+                
+              </div>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </section>
+  </div>
+</div>
+`;

public/app/core/specs/bridge_srv.jest.ts

-import { GlobalEventSrv } from 'app/core/services/bridge_srv';
+import { BridgeSrv } from 'app/core/services/bridge_srv';
 
 jest.mock('app/core/config', () => {
   return {
@@ -10,7 +10,7 @@ describe('BridgeSrv', () => {
   let searchSrv;
 
   beforeEach(() => {
-    searchSrv = new GlobalEventSrv(null, null, null);
+    searchSrv = new BridgeSrv(null, null, null, null);
   });
 
   describe('With /subUrl as appSubUrl', () => {

public/app/stores/AlertListStore.ts

@@ -55,13 +55,12 @@ export const AlertListStore = types
     stateFilter: types.optional(types.string, 'all'),
   })
   .actions(self => ({
-    setStateFilter: function(state) {
-      self.stateFilter = state;
-    },
-
-    loadRules: flow(function* load() {
+    loadRules: flow(function* load(filters) {
       let backendSrv = getEnv(self).backendSrv;
-      let filters = { state: self.stateFilter };
+
+      // store state filter used in api query
+      self.stateFilter = filters.state;
+
       let apiRules = yield backendSrv.get('/api/alerts', filters);
 
       self.rules.clear();

public/app/stores/NavStore.ts

@@ -25,6 +25,10 @@ export const NavStore = types
 
       for (let id of args) {
         node = _.find(children, { id: id });
+        if (!node) {
+          throw new Error(`NavItem with id ${id} not found`);
+        }
+
         children = node.children;
         parents.push(node);
       }

yarn.lock

@@ -10087,7 +10087,7 @@ whatwg-encoding@^1.0.1:
   dependencies:
     iconv-lite "0.4.19"
 
-whatwg-fetch@>=0.10.0, whatwg-fetch@^2.0.3:
+whatwg-fetch@>=0.10.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"