[WIP] Added a proof of concept for unit testing of a React component. Uses flow type annotations as well

This commit is contained in:
Sean Toner 2017-07-11 15:05:31 -04:00
parent a9a3c34358
commit f806c4c420
5 changed files with 1242 additions and 32 deletions

View file

@ -1,4 +1,4 @@
{
"presets": ["env"],
"presets": ["env", "flow"],
"plugins": ["transform-react-jsx"]
}

9
.flowconfig Normal file
View file

@ -0,0 +1,9 @@
[ignore]
[include]
[libs]
[options]
[lints]

View file

@ -0,0 +1,22 @@
import React, { Component } from 'react';
function TestComponent(props) {
return (
<p>Hello {props.name}</p>
);
}
export default class TestApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="testing">
This is just a test
<TestComponent name="Sean"/>
</div>
);
}
}

20
tests/concept.test.js Normal file
View file

@ -0,0 +1,20 @@
// @flow
import React from 'react'
import { shallow, mount, ShallowWrapper } from 'enzyme';
import TestApp, { TestComponent } from "../lib/components/test-component";
var test = require('tape'); // assign the tape library to the variable "test"
test('should return -1 when the value is not present in Array', (t) => {
let testArray: Array<number> = [1, 2, 3];
t.equal(-1, testArray.indexOf(4)); // 4 is not present in this array so passes
t.end();
});
test("should have 'Sean' in the TestComponent sub-component", (t) => {
const app: ShallowWrapper = shallow(<TestApp />);
t.equal(app.find("TestComponent").prop("name"), "Sean");
t.end();
});

1221
yarn.lock

File diff suppressed because it is too large Load diff