Giter VIP home page Giter VIP logo

Bridge Unit Testing Workshop / Presentation

  • Unit tests are located in the src/__tests__ folder
  • Will cover some core unit testing / jest concepts without React first
  • Then cover unit testing React Components, and using react testing library
  • Rough speaker / teacher notes - here

note - most unit tests are currently empty, after the workshop I will push up a branch that has all of them working for reference.

(deprecated) Exercise Details

note: The base of this repo was taken from an exercise from another training session which was to make a 'hacker news' search.

If you are curious about that training, and more details for the exercise that produced this repo, please check https://github.com/e-schultz/ts-js-react-training

This exercise is based on one of the previous data-fetch examples.

Modify src/components/SearchBar.js to use the useState hook instead of being a component that extends from React.Component

API Response Notes

The result from the API contains quite a bit of data. The full schema is blow, however, the key values we care about are the hits array, which is the result object.

For this practice, we only care about:

  • title
  • url
  • objectID
{
  "hits": [
    {
      "title": "Relicensing React, Jest, Flow, and Immutable.js",
      "url": "https://code.facebook.com/posts/300798627056246",
      "objectID": "15316175"
    }
  ],
  "nbHits": 143847,
  "page": 0,
  "nbPages": 50,
  "hitsPerPage": 20,
  "processingTimeMS": 3,
  "exhaustiveNbHits": false,
  "query": "react",
  "params": "advancedSyntax=true\u0026analytics=false\u0026query=react"
}

Full API Response

{
  "hits": [
    {
      "created_at": "2017-09-22T21:51:56.000Z",
      "title": "Relicensing React, Jest, Flow, and Immutable.js",
      "url": "https://code.facebook.com/posts/300798627056246",
      "author": "dwwoelfel",
      "points": 2280,
      "story_text": null,
      "comment_text": null,
      "num_comments": 498,
      "story_id": null,
      "story_title": null,
      "story_url": null,
      "parent_id": null,
      "created_at_i": 1506117116,
      "relevancy_score": 7675,
      "_tags": ["story", "author_dwwoelfel", "story_15316175"],
      "objectID": "15316175",
      "_highlightResult": {
        "title": {
          "value": "Relicensing \u003cem\u003eReact\u003c/em\u003e, Jest, Flow, and Immutable.js",
          "matchLevel": "full",
          "fullyHighlighted": false,
          "matchedWords": ["react"]
        },
        "url": {
          "value": "https://code.facebook.com/posts/300798627056246",
          "matchLevel": "none",
          "matchedWords": []
        },
        "author": {
          "value": "dwwoelfel",
          "matchLevel": "none",
          "matchedWords": []
        }
      }
    }
  ],
  "nbHits": 143847,
  "page": 0,
  "nbPages": 50,
  "hitsPerPage": 20,
  "processingTimeMS": 3,
  "exhaustiveNbHits": false,
  "query": "react",
  "params": "advancedSyntax=true\u0026analytics=false\u0026query=react"
}

Evan Schultz's Projects

angular-ssr icon angular-ssr

Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)

angular2-reactive-starter icon angular2-reactive-starter

Angular 2 Reactive Starter Kit with support for Route Async Loading, Conventions-Loader, Reactive observe-decorators, Webpack 2, and RxJS by @AngularClass

angular2-seed icon angular2-seed

Modular starter (seed) project for Angular 2 apps with fast, statically typed build

badgr icon badgr

Badger Management Solutions

example-app icon example-app

Example using @angular-redux/store, @angular-redux/router, and @angular-redux/form together with the Angular CLI

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.