Unit Testing

[vijayxtreme]

Let's continue the conversations around unit testing here.

The simplest way to add a unit test to your Component folder is to just create a file with structure: <ComponentName>.test.js | .tsx in a folder called /tests inside your Component's folder.

MyComponentFolder/
  tests/ 
    MyComponent.test.js | .tsx
  mycomponent.css 
  MyComponent.js | .tsx
  MyComponent.stories.js | .tsx
  index.js | .tsx

By default, jest will look through all files and folders in this project and if it finds any files ending in .test.js or .test.tsx, those will be picked up by the test runner. Note: If you create an empty test file, it will throw an error with jest, so if you haven't written any tests yet but have a test file, add the following code to your test file so that jest doesn't complain.

//MyComponent.test.js
test.skip('skip', () => {});

Run tests with yarn test from the command line.

[vijayxtreme]

I have included the React Testing Library and Jest-DOM with our project. Be sure to import your component in your test file along with testing-library and jest-dom (optional), so you can write your test statements. Please check the documentation on React Testing Library to become familiar with testing and check the current repo to see how I've done some testing in the Alert Component.

[vijayxtreme]

This was also a good article: https://jkettmann.com/beginners-guide-to-testing-react/

[AdamMomen]

@vijayxtreme Looking good! link to the docs here

[vijayxtreme]

From @dwidjaja945 (Summary of his video notes and conversations with me).

From my understanding, you don't need to test implementation details. It is best to just test what the user would see on the UI. So mostly the presence or absence of UI elements, UI changes per some event fire etc. That way if the internals of the component changes but the UI stays the same, then test cases remain valid since what matters most is what is on the DOM.

Check out Dylan's segment about Unit Testing here