Add lesson for unit tests #10

kay-is · Jul 5, 2018 · 7dc8cf9 · 7dc8cf9
1 parent 96028f1
commit 7dc8cf9
Showing 1 changed file with 87 additions and 0 deletions.
diff --git a/17-unit-testing.html b/17-unit-testing.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+
+<title>17 Unit Testing - React From Zero</title>
+
+<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+<script src="https://unpkg.com/[email protected]/mocha.js">
+ // the basic test tool for React is Jest, but it doesn't run in the browser
+ // that's why we only use parts of Jest (expect and jest-mock) here to
+ // illustrate basic testing setup. Mocha is used as an alternative test runner
+</script>
+<link href="https://unpkg.com/[email protected]/mocha.css" rel="stylesheet" />
+
+<!--
+ the shallow renderer is needed to render components without the need of
+ ReactDOM or a DOM in general
+-->
+<script src="https://unpkg.com/[email protected]/umd/react-test-renderer-shallow.development.js"></script>
+
+<!-- these two libraries are parts of the Jest tooling -->
+<script src="https://unpkg.com/expect@%3C21/umd/expect.min.js"></script>
+<script src="https://unpkg.com/[email protected]/build-es5/index.js"></script>
+
+<!-- the render target of the Mocha test results -->
+<div id="mocha"></div>
+
+<script type="text/babel">
+ // if you use Jest later, ignore Mocha specific code
+ mocha.setup("bdd");
+
+ // a simple component. It would normally be imported from another file
+ const MyComponent = () => (
+ <div>
+ <span className="heading">Title</span>
+ </div>
+ );
+
+ // the first test, Jest and Mocha both using describe() and it()
+ describe("Component", () => {
+ it("should render", () => {
+ // a new renderer is created and used to render the component
+ const renderer = new ReactShallowRenderer();
+ renderer.render(<MyComponent />);
+
+ // result here should look quiet familiar from lesson 00
+ let result = renderer.getRenderOutput();
+
+ // now you can traverse the result and check it for correctness
+ expect(result.type).toBe("div");
+ expect(result.props.children).toEqual(
+ <span className="heading">Title</span>
+ );
+
+ // Jest can also create snapshot files
+ // they will be used to check for changes in the next test-runs
+ // expect(result).toMatchSnapshot();
+ });
+ });
+
+ // it is also possible to mock parts of target code with Jest
+
+ // here we use the mock part of Jest stand-alone
+ // normally this is part of the global "jest" object
+ const jest = window["jest-mock"];
+
+ // mocking a function to test callback behaviour
+ const mockCallback = jest.fn();
+
+ describe("Callback", () => {
+ it("should be called two times", () => {
+ // a test function that calls a callback two times
+ const callCallback = c => {
+ c();
+ c();
+ };
+
+ callCallback(mockCallback);
+
+ // the mocked function has some properties to check its usage
+ expect(mockCallback.mock.calls.length).toBe(2);
+ });
+ });
+
+ mocha.checkLeaks();
+ mocha.run();
+</script>