Adding Jest to an ES5 project (‘Unexpected token’ errors on JSX)

So far I’ve been using Jest with ES6 (see here), but to run Jest tests against React code using ES5, you might get errors when running your test and rendering the JSX.

Per the Jest docs, install the required Jest dependencies:

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

If you run ‘npm test’ at this point, any tests matching the *.test.* pattern will get executed, but you’ll probably also see an error ‘Unexpected token’ whenever a render() is called that contains JSX.

The quick fix in this SO question is to add a .babelrc containing this:

{ “presets”: [“es2015”, “react”] }

and then when Jest runs against your React components Babel will know how to transpile your JSX.

More React unit testing with Jest and Enzyme

I’ve been writing some additional tests to get a better idea of how to use Jest and Enzyme for testing my React components (see my first attempts here).

I have a simple Flux app that had a LabelComponent and a ButtonComponent. The full source is here. I want to test the render output is what I expect. The render method on my LabelComponent is pretty simple:

render() {
    return (
        <div className="label">
            Text: { this.state.labelValue.value }
        </div>
    );
}

This component has state which comes from a Store, so this seems a little more interesting to test.

Using Enzyme you can either fully render a component to a virtual DOM using mount() and then check the results, or you can shallow() render which only renders that component and not any additional child dependencies (this is probably more useful for unit tests).

Using mount(), you can check for expected rendered output in the resulting DOM using .contains() – without doing anything to initialize the Store, this is my first step:

import React from 'react';
import {shallow, mount} from 'enzyme';
import LabelComponent from '../components/LabelComponent';
it('renders with text value', () => {

    const result = mount(<LabelComponent/>);
    expect(result.contains(<div className="label">Text: </div>));
});

This is good so far, but I’m really more interested in how the component renders when the Store contains values to be rendered. I’m not sure if I’ve found the right way to do this, but looking for info on how to mock out other parts of my app, like the Store, took me down a rabbit hole. The Jest docs for mocking are not particularly useful. In the api reference there’s something that looks like it allows you to setup a mock return from a function, but it doesn’t have enough info to tell you exactly how to use it.

It seems the Jest api has changed enough over time that it’s hard to find any articles that are current, and show you how the current api should be used. This SO post has a question that’s pretty close to what I was trying to do. There’s two answers that combined together got me to a working solution.

This approach didn’t work for me:

const getData = jest.fn().mockImplementation(() => {
    return {
        getData: jest.fn().mockReturnValue({'labelValue' : { 'value' : 'test'} } )
    }
});

… but, this approach did exactly what I needed:

jest.mock('../stores/LabelStore');
import LabelStore from '../stores/LabelStore';
const getData = jest.fn().mockImplementation(function() {
    return {'labelValue' : { 'value' : 'testvalue'} }
    }
);
LabelStore.getData = getData.bind(LabelStore);

As far as I work out, this is mocking my getData() function to return the mocked data I want for testing, and then binding it to a mocked LabelStore.

I’m not sure if this is the best approach for mocking with Jest, but this is doing exactly what I need. If I learn more about this approach I’ll come back and provide an update later.

Building a Spring Boot RestController to search Redis

I’ve just started taking a look at using Redis. I wondered what it would look like to build a simple REST interface with Spring Boot. Spring Data Redis makes this pretty simple.

First up, you need to configure a @Bean in your @SpringBootApplication class (full source is on github here):

@Bean
RedisTemplate<String, Object> redisTemplate() {
  RedisTemplate<String, Object> template = new RedisTemplate<String, Object>();
  template.setConnectionFactory(jedisConnectionFactory());

  // these are required to ensure keys and values are correctly serialized
  template.setKeySerializer(new StringRedisSerializer());
  template.setHashValueSerializer(new GenericToStringSerializer<Object>(Object.class));
  template.setValueSerializer(new GenericToStringSerializer<Object>(Object.class));
  return template;
}

This is connecting with default settings to a locally running Redis.

Wire up a RedisTemplate into a Controller like this:

@RestController
public class RedisRestController {

  @Autowired
  private RedisTemplate<String, Object> template;

  @GetMapping("singlekey/{key}")
  public RedisResult getSingleValue(@PathVariable("key") String key){
    String value = (String)this.template.opsForValue().get(key);
    RedisResult result = new RedisResult(key, value);
    return result;
  }
}

and this is a bare minimum to get started, but shows how easy it is to get stuff up and running with Spring Boot and other projects like Spring Data.

Send a GET to /singlekey/ with a key value and json for the result is returned.

Spring Boot RestController Error: “No converter found for return value of type”

Spring Boot RestControllers by default can return a Pojo class as the return result from a mapped request method, and it is converted into a Json result. I’ve run into this issue before though, and it’s not immediately obvious what’s wrong: ‘No converter found for return value of type’ :

java.lang.IllegalArgumentException: No converter found for return value 
of type: class kh.springboot.redis.domain.RedisResult
at org.springframework.web.servlet.mvc.method.annotation
.AbstractMessageConverterMethodProcessor
.writeWithMessageConverters(AbstractMessageConverterMethodProcessor.java:187) ~[spring-webmvc-4.3.6.RELEASE.jar:4.3.6.RELEASE]

My returned class from my @GetMapping method is just a simple Pojo:

public class RedisResult {

private String key;
private String value;

public RedisResult(String key, String value) {
  this.key = key;
  this.value = value;
  }
}

And my @RestController is a simple controller with a single @GetMapping (in this case I’m building a REST endpoint to query key values from Redis using Spring Data Redis RedisTemplate:

@RestController

public class RedisRestController {

  @Autowired
  @Qualifier("RedisTemplate")
  private RedisTemplate template;

  @GetMapping("singlekey/{key}")
  public RedisResult getSingleValue(@PathVariable("key") String key){
    String value = (String)this.template.opsForValue().get(key);
    RedisResult result = new RedisResult(key, value);
    return result;
  }
}

If you’ve found my post because you have this same issue, before you go down the rabbit hole adding additional Maven dependencies or additional annotations you think might be missing, the reason is usually that your Pojo class you are returning doesn’t have any public getter methods. For each property in your Pojo you want returned in your Json, make sure you have a public getter.

This is discussed in this StackOverflow post here.

Spring Boot: cannot find classfile ConfigurableApplicationContext (invalid LOC header)

Spring Boot with it’s maven starter dependencies is incredibly helpful to get a simple Spring Boot app up and running in no time, but occasionally you run into weird errors in Eclipse like:

The project was not built since its build path is incomplete. 
Cannot find the class file for 
org.springframework.context.ConfigurableApplicationContext. 
Fix the build path then try building this project

Or doing a mvn compile from your shell, something like:

[INFO] -------------------------------------------------------------
[ERROR] COMPILATION ERROR : 
[INFO] -------------------------------------------------------------
[ERROR] error reading /Users/kev/.m2/repository/org/apache/tomcat/embed/tomcat-embed-core/8.5.11/tomcat-embed-core-8.5.11.jar; invalid LOC header (bad signature)

Assuming you’re already using the Spring Boot Starter Web dependency:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

.. errors about Classes not found or errors reading .jars (‘invalid LOC header’) could be related to jars in your local .m2 repo being corrupt.

This is pretty easy to correct if you go into your ~/.m2/repository/ and delete your downloaded dependencies. You can be more specific in what you delete if you have something that you can easily identify as coming from a specific dependency.

Digital Research – Pacific Grove, California

Gary Kildall and his company Digital Research played a pivotal part in the history of the development of the IBM PC. IBM approached Bill Gates and Paul Allen to provide a number of programming languages for the original IBM PC, and later returned to Microsoft to ask if they could also provide the operating system. Not having anything available at the time, Gates suggested they talk with Gary Kildall at Digital Research, who had developed the CP/M operating system for 8080 based computers at the time.

The history of exactly what happened during the meeting with IBM and Gary’s wife at Digital Research may never be clear, but for whatever reason, Kildall was unavailable to discuss with IBM. When IBM returned to Gates and Allen, they decided to go talk with Rod Brock and Tim Patterson at Seattle Computer Products (SCP) and licensed their QDOS operating system for the 8086 for $10,000 and $15,000 for each company that licensed the product from Microsoft. This became the basis for MS-DOS, The rest, is history.

(If you’re interested, I highly recommend the book Fire in the Valley, a great book which covers the story of the IBM PC in detail, as well as earlier and later history)

The original location of Digital Research is at 801 Lighthouse Ave, in Pacific Grove, California. The building is now a private residence. On a vacation to Pacific Grove earlier this month, I looked up the location where the office was, and as it was only a couple of blocks from where we were staying, so we stopped by:

 

 

 

This IEEE have installed a plaque on the sidewalk outside the building to commemorate the contributions of Gary Kildall, Digital Research and the CP/M operating system:

 

Unit testing React components with Jest

Jest is a unit test framework for testing React apps. The Getting Started guide is pretty much all you need to get started. If you’ve created your project using create-react-app then you’re already setup, just run ‘npm test’ and a runner will test up that repeatedly runs your tests as you make code or test changes.

create-react-app also creates a sample test for the sample App.js component. This is a good starting point to follow for other tests:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App/>, div);
});

To test the results of rendering a component, the enzyme library allows you to easily capture the output from a render, and then query the results. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import {shallow, mount} from 'enzyme';
import Calculator from '../Components/CalculatorComponent';
it('renders with result 3', () => {
    const result = mount(<Calculator value1="1" value2="2" />);
    result.find('button').simulate('click');
    const buttonResult = result.find("#result").first();
    expect(buttonResult.text()).toEqual("3");
});

The CalculatorComponent I’m testing here is the one from my previous React post.

Remember the Motorola Atrix in 2011 with its Webtop mode?

One of the rumors about Samsung’s upcoming S8 is that they are going to introduce a desktop mode supporting an external monitor and keyboard/mouse.

Not so long ago Microsoft were trying to convince us about Continuum and how we’d all be plugging our phones into desktop monitors and keyboards.

Let’s not forget that Microsoft was not the first to try this – several years before Continuum, Motorola tried out something similar on their Atrix phone back in 2011 (and a number of Motorola phones that followed?) where it supported a dual boot mode that could be booted into a Ubuntu Linux based desktop mode when connected to a monitor, keyboard and mouse.

Motorola apparently discontinued the feature because base features in Android starting supporting HDMI and attaching USB devices such as USB external drives, keyboards, mice etc to your phone via a USB OTG connector. Not many people are aware that your Android phone may already support connecting to a monitor, keyboard and mouse, if you so want to. Take a look on the box or in your manual for the ‘USB on-the-go’ logo and you might have these features already.

Packet Radio: Checking in to the Central California Sunday Packet Net using Linpac and Direwolf

I didn’t think it was year ago that I last checked to the Central California Packet Sunday night net, but looking for notes on how to send packet unproto frames from Linpac, this post was today exactly last year. Apparently January 15th is my favorite day for doing some packet radio.

This is using ax25, Direwolf and Linpac setup on Debian that I posted about a few days back. I did a screen recording of the net checkins so you can see what a packet net looks like. It’s not exactly fast paced, and in the middle there’s some WinLink email inbox checking going on, but you can see Ben KG6BNL running Net Control, and then check-ins that follow.

In the screencapture I’m ssh’d from my Mac into my desktop upstairs which has a Rigblaster Plug n Play connected to my Icom 880h. The top session is Direwolf, so you can see it’s decoding all the packets it hears. The bottom session is Linpac, where I’m using :unproto to send my check-in.