Tech - React Test Library - Test Complete App

package.json

@@ -57,6 +57,7 @@
     "node-sass": "^4.9.3",
     "nyc": "^12.0.2",
     "react-addons-test-utils": "^15.6.2",
+    "react-testing-library": "^5.1.0",
     "redux-test-utils": "^0.2.2",
     "sass-loader": "^7.1.0",
     "selenium-server": "^3.14.0",

src/client/components/App.jsx

@@ -17,6 +17,7 @@ export default class App extends React.Component {
           +
       </Button>
       <FormControl
+        data-testid="number"
         type="text"
         value={this.props.number}
         onChange={this.handleChange}

test/unit/client/index.js

@@ -0,0 +1,42 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { render, fireEvent, cleanup } from "react-testing-library";
+import { Provider, connect } from "react-redux";
+import { createStore, applyMiddleware, compose } from "redux";
+import createSagaMiddleware from "redux-saga";
+const sagaMiddleware = createSagaMiddleware();
+
+import reducers from "../../../src/client/reducers/combined";
+import AppContainer from "../../../src/client/containers/App";
+import rootSaga from "../../../src/client/sagas/combined";
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+
+function renderWithRedux(ui, store) {
+  return {
+    ...render(<Provider store={store}>{ui}</Provider>),
+    store
+  };
+}
+
+describe.only("actions", () => {
+  it("should trigger the ADD action", () => {
+    const store = createStore(
+      reducers,
+      {
+        calc: { number: 0 }
+      },
+      composeEnhancers(applyMiddleware(sagaMiddleware))
+    );
+    store.subscribe(()=> console.log(store.getState()));
+    sagaMiddleware.run(rootSaga); 
+    const { getByTestId, getByText, getByValue } = renderWithRedux(<AppContainer />, store);
+    fireEvent.click(getByText("-"));
+    fireEvent.click(getByText("+"));
+    expect(getByTestId("number").value).to.equal("0");
+  });
+});