jest component test

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

app/core/checkmark/checkmark.filter.spec.js

@@ -1,7 +1,13 @@
-'use strict';
+import 'angular';
+import 'angular-resource';
+import 'angular-mocks';
+
+import '../core.module';
+import '../phone/phone.module';
+import './checkmark.filter';
 
 describe('checkmark', function () {
-  beforeEach(module('core'));
+  beforeEach(angular.mock.module('core'));
 
   it('should convert boolean values to unicode checkmark or cross', inject(function (
     checkmarkFilter

app/core/phone/phone.service.spec.js

@@ -1,4 +1,9 @@
-'use strict';
+import 'angular';
+import 'angular-resource';
+import 'angular-mocks';
+
+import '../phone/phone.module';
+import './phone.service';
 
 describe('Phone', function () {
   var $httpBackend;
@@ -7,11 +12,18 @@ describe('Phone', function () {
 
   // Add a custom equality tester before each test
   beforeEach(function () {
-    jasmine.addCustomEqualityTester(angular.equals);
+    expect.extend({
+      toEqual: (actual, expected) => {
+        return {
+          pass: angular.equals(actual, expected),
+          message: `Expected ${actual} to equal ${expected}`
+        };
+      }
+    });
   });
 
   // Load the module that contains the `Phone` service before each test
-  beforeEach(module('core.phone'));
+  beforeEach(() => angular.mock.module('core.phone'));
 
   // Instantiate the service and "train" `$httpBackend` before each test
   beforeEach(inject(function (_$httpBackend_, _Phone_) {

app/phone-detail/phone-detail.component.spec.js

@@ -1,8 +1,16 @@
-'use strict';
+import 'angular';
+import 'angular-resource';
+import 'angular-route';
+import 'angular-mocks';
+
+import '../core/phone/phone.module';
+import '../core/phone/phone.service';
+import './phone-detail.module';
+import './phone-detail.component';
 
 describe('phoneDetail', function () {
   // Load the module that contains the `phoneDetail` component before each test
-  beforeEach(module('phoneDetail'));
+  beforeEach(angular.mock.module('phoneDetail'));
 
   // Test the controller
   describe('PhoneDetailController', function () {
@@ -22,7 +30,14 @@ describe('phoneDetail', function () {
     }));
 
     it('should fetch the phone details', function () {
-      jasmine.addCustomEqualityTester(angular.equals);
+      expect.extend({
+        toEqual: (actual, expected) => {
+          return {
+            pass: angular.equals(actual, expected),
+            message: `Expected ${actual} to equal ${expected}`
+          };
+        }
+      });
 
       expect(ctrl.phone).toEqual({});
 

app/phone-list/PhoneItems.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import 'angular';
+import '../phone-list/phone-list.module';
+import PhoneItems from './PhoneItems';
+import phones from '../phones/phones.json';
+
+describe('PhoneItems', () => {
+  it('should render phone items', () => {
+    render(<PhoneItems phones={phones} orderProp="age" />);
+
+    const phoneList = screen.getAllByRole('listitem');
+
+    expect(phoneList).toHaveLength(20);
+    expect(phoneList[0]).toHaveTextContent('Motorola XOOM™ with Wi-Fi');
+  });
+
+  it('should render phone items with query', () => {
+    render(<PhoneItems phones={phones} query="motorola" orderProp="age" />);
+
+    expect(screen.getAllByRole('listitem')).toHaveLength(8);
+  });
+
+  it('should render phone items with query and orderProp', () => {
+    render(<PhoneItems phones={phones} query="motorola" orderProp="name" />);
+
+    const phoneList = screen.getAllByRole('listitem');
+
+    expect(phoneList).toHaveLength(8);
+    expect(phoneList[0]).toHaveTextContent('DROID™ 2 Global by Motorola');
+  });
+});

app/phone-list/PhoneItems.tsx

@@ -5,7 +5,7 @@ import { Phone } from './types';
 import { Flipper, Flipped } from 'react-flip-toolkit';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 type Props = {
-  phones: (Phone & { height: number })[];
+  phones: Phone[];
   query?: string;
   orderProp: 'name' | 'age';
 };

app/phone-list/phone-list.component.spec.js

@@ -1,8 +1,16 @@
-'use strict';
+import 'angular';
+import 'angular-resource';
+import 'angular-route';
+import 'angular-mocks';
+
+import '../core/phone/phone.module';
+import '../core/phone/phone.service';
+import './phone-list.module';
+import './phone-list.component';
 
 describe('phoneList', function () {
   // Load the module that contains the `phoneList` component before each test
-  beforeEach(module('phoneList'));
+  beforeEach(angular.mock.module('phoneList'));
 
   // Test the controller
   describe('PhoneListController', function () {
@@ -18,7 +26,14 @@ describe('phoneList', function () {
     }));
 
     it('should create a `phones` property with 2 phones fetched with `$http`', function () {
-      jasmine.addCustomEqualityTester(angular.equals);
+      expect.extend({
+        toEqual: (actual, expected) => {
+          return {
+            pass: angular.equals(actual, expected),
+            message: `Expected ${actual} to equal ${expected}`
+          };
+        }
+      });
 
       expect(ctrl.phones).toEqual([]);
 

jest-setup.js

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+
+global.jasmine = true;

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  testEnvironment: 'jest-environment-jsdom',
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  },
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/tests/'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
+};