Articles, notes and random thoughts on Software Development and Technology
Redis is a key/value in-memory datastore. The Getting Started guide will get you up and running pretty quick.
Startup:
./redis-server
CLI:
./redis-cli
From cli, inserting a value:
set key value
Get a value:
get key
List keys:
keys pattern
List all keys, not recommended against a large prod database:
keys *
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.
Developing with React and ES5, state on a Component is configured using the getInitialState() function:
var ButtonComponent = React.createClass({
getInitialState : function(){
return({
value1: this.props.value1,
value2: this.props.value2
});
},
...
});
If you’re moving from ES5 TO ES6 and creating React components using ES6 classes, if you try to follow the same approach you’ll see an error like this:
To set the initial state on an ES6 React class, you establish it in the constructor like this:
constructor(props) {
super(props);
this.state = {
value1 : this.props.value1,
value2 : this.props.value2,
};
}
In Windows I like that you can Shift-Rightclick in Explorer and select “Open command prompt here”. During development I often want to do the same on my Mac, and this feature is provided too, but not enabled by default. To turn it on, go to System Preferences > Keyboard > Shortcuts, select Services on the left, and then check the option “New Terminal at Folder”:
If you want to go in the other direction, you can easily open a Finder at your current folder in Terminal by running ‘open .’
A couple of bonus tips:
