React and Graphql Unit Testing

1. By : Ihsan Fauzi Rahman

2. REACT INTRODUCTION
• Declarative
React will efficiently update and render just the right components when your data
changes
• Component Based
Build encapsulated components that manage their own state, then compose them
to make complex UIs
• Learn Once, Write Anywhere ( Debug Everywhere ~ Pardi )
React can also render on the server using Node and power mobile apps using
React Native.

3. REACT EXAMPLE
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name=”Adskom" />,
document.getElementById(‘App’));
Output :
<div>Hello Adskom</div>

4. REACT TESTING
We use :
• Mocha – JS Test Framework (describe, it)
• Chai - JS BDD / TDD assertion library (expect)
• Enzyme – React Test Utility (shallow, mount)
• Sinon – JS Test Spies, Stubs & Mocks (spy)

5. TESTING (SHALLOW RENDERING)
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import MyComponent from './MyComponent';
import Foo from './Foo';
describe('<MyComponent />', () => {
it('renders three <Foo /> components', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo)).to.have.length(3);
});
it('renders an `.icon-star`', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.icon-star')).to.have.length(1);
});
it('renders children when passed in', () => {
const wrapper = shallow(
<MyComponent>
<div className="unique" />
</MyComponent>
);
expect(wrapper.contains(<div className="unique"
/>)).to.equal(true);
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = shallow(
<Foo onButtonClick={onButtonClick} />
);
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount', 1);
});
});

6. TESTING (FULL DOM RENDERING)
import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';
import Foo from './Foo';
describe('<Foo />', () => {
it('allows us to set props', () => {
const wrapper = mount(<Foo bar="baz" />);
expect(wrapper.props().bar).to.equal('baz');
wrapper.setProps({ bar: 'foo' });
expect(wrapper.props().bar).to.equal('foo');
});
it('simulates click events', () => {
const onButtonClick = sinon.spy();
const wrapper = mount(
<Foo onButtonClick={onButtonClick} />
);
wrapper.find('button').simulate('click');
expect(onButtonClick).to.have.property('callCount',
1);
});
it('calls componentDidMount', () => {
sinon.spy(Foo.prototype, 'componentDidMount');
const wrapper = mount(<Foo />);
expect(Foo.prototype.componentDidMount).to.ha
ve.property('callCount', 1);
Foo.prototype.componentDidMount.restore();
});
});

7. GRAPHQL INTRODUCTION
GraphQL is a query language for APIs and a runtime for fulfilling those
queries with your existing data. GraphQL provides a complete and
understandable description of the data in your API, gives clients the power
to ask for exactly what they need and nothing more, makes it easier to
evolve APIs over time, and enables powerful developer tools
Ask what you need, give what you need
{
hero {
name
height
}
}
{
"hero": {
"name": "Luke Skywalker",
"height": 1.72,
}
}
Will Return

8. GRAPHQL TESTING
We use :
• Mocha – JS Test Framework (describe, it)
• Chai - JS BDD / TDD assertion library (expect)
• graphql-tools - Graphql Schema Builder (mockServer, MockList)
• casual-browserify – Fake data generator (casual)

9. GRAPHQL TESTING
import {expect} from 'chai';
import {mockServer} from 'graphql-tools';
import casual from 'casual-browserify';
import schema from '../schema';
var query = `user{
id,
email
}`;
describe('graphql-user', () => {
context(query, () => {
it(’resulted correctly', async () => {
const server = mockServer(schema, {
Query: () => ({
user: () => ({
id: casual.integer(1, 1000),
email: () => casual.email,
})
})
});
const result = await server.query(`query{
${query}
}`);
console.log(result);
expect(result.data.user).to.be.an('object');
expect(result.data.user.id).to.be.a('string');
expect(result.data.user.email).to.be.a('string');
});
});
});

10. FURTHER TESTING
• Mutation Testing
• Scenario Testing
• Error Handling
• Security Testing
• Performance Testing

11. CONCLUSION
Testing React and JS is easy but
constantly writing it was a
challenge, legend said that it
will reduce your lifetime
LOL

12. Links :
https://mochajs.org/
http://sinonjs.org/
http://airbnb.io/enzyme/index.html
http://chaijs.com
http://graphql.org/