Testing React Apps with Jest & Enzyme

Questions

Hi.

Sanjeev Yadav

Software Engineer @MindfireSolutions

What is Automated Testing?

Why do we Test?

Types of Tests

Unit Test

Integration Test

End-to-End Test

​Unit Tests

Integration Tests

E2E

Tests

💰🤑💰

cheap

🐢

🏎️

Test Driven Development

(TDD)

Test

Fails

Test

Passes

Refactor

 

Demo

Jest.js

  • JavaScript Testing Framework

  • Developed by Facebook

  • Works with  React/Angular/Vue/Node/TypeScript/Babel

  • Fast

  • Function Mock

  • Code Coverage & Snapshots

Jest Globals

test
describe
expect
toBe
toEqual

test

test('test description', () => {
  //business logic...
})

describe

describe('section to group similar test', () => {
  test('test 1', () => {
  	//business logic...
  })
  
  test('test 2', () => {
  	// another business logic...
  })
})

expect

expect(2).toBe(2); // will pass
expect(true).toBe(false); // will fail

expect(["one", "two", "three"])
  .toEqual(["one", "two", "three"]); // will pass

expect({ name: "Sanjeev Yadav"})
  .toEqual({ name: "Sanjeev Yadav"}); // will pass

Test Example

test('sum of 2 + 2 is 4', () => {
  const result = add(2, 2);
  expect(result).toBe(4);
});

enzyme.js

yarn add -D enzyme enzyme-adapter-react-16 jest  jest-enzyme

Dependency

Demo

Any Questions?

Feedback

Links

Jest.js

enzyme.js

article

THE END

Testing React Apps using Jest & Enzyme

By Sanjeev Yadav

Testing React Apps using Jest & Enzyme

Practical approach to understand testing and in hand demonstration of writing unit & integration test for your React and Redux component using Jest.js & Enzyme.js

  • 881