Writing unit tests with Jest using test best practices

Transcript

1. Writing unit tests with Jest Felipe Soares using test best practices
2. Olá! • FE engineer • CA for 1 year and 3 months • Brazil • Coffee, soccer, books, indie bands • Beer • Travel when possible (been safe for now)
3. Thanks for all the contributions on the threads
4. We will talk about • Testing the behaviour • Window object • Coverage • Tests as documentation • Unit tests structure • How to use Jest • Code
5. Testing the behaviour
6. We should • Avoid tests attached to the internals like “should defined variable x” • Avoid testing static methods • Avoid testing browser api’s such as listeners calls avoid
7. What we should • Focus on functionality itself for most all the tests • Test public method responses • Always try to simulate the user interaction when it’s possible really focus
8. Using the window object on our tests
9. Should we use it? • We decided to not use the window object • Feel free to clean the script and tests by mocking the window directly with Jest
10. Should we care about the tests coverage?
11. target 100% of coverage for new script tests
12. 100% of coverage • Behaviour tests should go through the entire code covering all the branches • Don’t use as the only metric to review approval • For old scripts, let’s try to cover at least the new features added or changed
13. Tests as documentation
14. Since the tests are docs we should care about the structure of our own documentation
15. • Use one describe for each behaviour • Use one describe for each branch • Break the tests into 3 steps Tests structure
16. 1. Prepare all the data, variables, mocks 2. Run your test to trigger the behaviour like a click or an function call 3. Write the assertion expected for the behaviour tested Testing structure
17. SUPER DIFFICULT SURPRISE QUESTION what
18. ??? How much of effort it will take to migrate an entire codebase tests?
19. the answer is: around 50 pr’s
20. how to jest? finally
21. • We can mock global objets directly • We can continue to use the jasmine expectations • Let’s check a couple of examples Couple things before we start
22. • jasmine.spyOn(object, method); jasmine spyOn -> • jest.spyOn(object, method); -> jest spyOn
23. • const mock = jasmine.spy(); jasmine spy -> • const mock = jest.fn(); -> jest fn
24. • windowMock.addEventlistener = jasmine.spy(); jasmine window mock -> • global.window.addEventListener = jest.fn(); -> jest window mock
25. let's some code finally 2
26. callLater(fakeMethod) { setTimeout(() => { fakeMethod(); }, 10000); } testing timers ->
27. describe(“Test suite”, () => { jest.useFakeTimers(); afterEach(() => { jest.clearAllTimers(); }); });
28. describe(“Test suite”, () => { jest.useFakeTimers(); afterEach(() => { jest.clearAllTimers(); }); });
29. describe("When the script initiates”, () => { it("should trigger the fakeMethod”, () => { const fakeMethod = jest.fn(); callLater(fakeMethod); jest.runAllTimers(); expect(fakeMethod).toHaveBeenCalled(); }); });
30. describe("When the script initiates”, () => { it("should trigger the fakeMethod”, () => { const fakeMethod = jest.fn(); callLater(fakeMethod); jest.runAllTimers(); expect(fakeMethod).toHaveBeenCalled(); }); });
31. describe("When the script initiates”, () => { it("should trigger the fakeMethod”, () => { const fakeMethod = jest.fn(); callLater(fakeMethod); jest.runAllTimers(); expect(fakeMethod).toHaveBeenCalled(); }); });
32. describe("When the script initiates”, () => { it("should trigger the fakeMethod”, () => { const fakeMethod = jest.fn(); callLater(fakeMethod); jest.runAllTimers(); expect(fakeMethod).toHaveBeenCalled(); }); });
33. For more info: https://jestjs.io/docs/en/timer-mocks
34. import classHelper from “class-helper—cool-lib“; checkClass (el) { return classHelper.hasClass(el,“nice-class”); }); }); mocking modules ->
35. import classHelper from "class-helper—cool-lib"; jest.mock(“class-helper—cool-lib”); describe("When I am using the cool class library”, () => { it(“and I need to check if a class exists”, () => { classHelper.hasClass.mockResolvedValue(false); const el = document.createElement("div"); const result = checkClass(el); expect(result).toBe(false); }); });
36. import classHelper from "class-helper—cool-lib"; jest.mock(“class-helper—cool-lib”); describe("When I am using the cool class library”, () => { it(“and I need to check if a class exists”, () => { classHelper.hasClass.mockResolvedValue(false); const el = document.createElement("div"); const result = checkClass(el); expect(result).toBe(false); }); });
37. import classHelper from "class-helper—cool-lib"; jest.mock(“class-helper—cool-lib”); describe("When I am using the cool class library”, () => { it(“and I need to check if a class exists”, () => { classHelper.hasClass.mockResolvedValue(false); const el = document.createElement("div"); const result = checkClass(el); expect(result).toBe(false); }); });
38. import classHelper from "class-helper—cool-lib"; jest.mock(“class-helper—cool-lib”); describe("When I am using the cool class library”, () => { it(“and I need to check if a class exists”, () => { classHelper.hasClass.mockResolvedValue(false); const el = document.createElement("div"); const result = checkClass(el); expect(result).toBe(false); }); });
39. import classHelper from "class-helper—cool-lib"; jest.mock(“class-helper—cool-lib”); describe("When I am using the cool class library”, () => { it(“and I need to check if a class exists”, () => { classHelper.hasClass.mockResolvedValue(false); const el = document.createElement("div"); const result = checkClass(el); expect(result).toBe(false); }); });
40. what if I need a true method from a mocked module -> const { addClass } = jest.requireActual(“class-helper—cool-lib”);
41. For more info: https://jestjs.io/docs/en/mock-functions https://jestjs.io/docs/en/bypassing-module-mocks
42. callAsync(APIClient) { return APIClient.fetch() .then(data => data) .catch(error => error) } testing async ->
43. success example
44. describe("When the script initiates”, () => { describe(“and it’s succeed”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
45. describe("When the script initiates”, () => { describe(“and there is no error”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
46. describe("When the script initiates”, () => { describe(“and there is no error”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
47. describe("When the script initiates”, () => { describe(“and there is no error”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
48. describe("When the script initiates”, () => { describe(“and there is no error”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
49. describe("When the script initiates”, () => { describe(“and there is no error”, () => { it("should trigger the API call”, (done) => { const success = “Nothing to worry about here!”; const promise = Promise.resolve(success); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().then((response) => { expect(response).toBe(success); done(); }); }); }); });
50. Jest will wait until the done is called before finishing the test By default, Jest tests complete once they reach the end of their execution.
51. failure example
52. describe("When the script initiates”, () => { describe(“and there is an error”, () => { it("should trigger the API call”, (done) => { const error = “Oh no, the house is on fire!”; const promise = Promise.rejects(error); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().catch((response) => { expect(response).toBe(error); done(); }); }); }); });
53. describe("When the script initiates”, () => { describe(“and there is an error”, () => { it("should trigger the API call”, (done) => { const error = “Oh no, the house is on fire!”; const promise = Promise.rejects(error); const fetchMock = jest.fn().mockReturnValue(promise); const fakeAPIClient = { fetch: fetchMock }; callAsync(fakeAPIClient); fakeAPIClient().catch((response) => { expect(response).toBe(error); done(); }); }); }); });
54. For more info: https://jestjs.io/docs/en/asynchronous
56. Building a brand new test file using jest styleguide/content-base-toggle.spec.es6
57. more cool stuff
58. For those who use VScode: https://github.com/jest-community/vscode-jest
59. You can use the Jest interface with: cabob t —watch
60. Some helpers would be nice!
61. More about tests: https://consumeraffairs.atlassian.net/wiki/spaces/DT/pages/ 943030281/Unit+tests+guidelines https://github.com/goldbergyoni/javascript-testing-best- practices
62. thanks