Research - Testing with Jest

[jamescd18]

Research the Jest testing package to understand how testing could work, and such like that.

[jamescd18]

https://jestjs.io

[jamescd18]

Put longer notes here in this issue, along with potential sample code and any other thoughts. And then you can put a couple bullets summary / thoughts in this document.

[eshwaribhide]

1. Preliminary Installation Stuff

In terms of doing actual CI stuff, here is an article.

Eventually we will be converting to TS, and Jest supports TS via Babel (JS Compiler). There is an issue with this, though, as supposedly Babel doesn't type-check and thereby Jest will not type-check your tests as they are run. If this is an issue, then an alternative is to use the open source ts-jest (also install the @types/jest module). Here is an article where ts-jest is installed.

Whatever it ends up being, you will then have to configure jest, either through the package.json file in the project or through a jest.config.ts file (in this article is an example). Also the command jest --init creates a basic config file.

Once everything is configured, it is relatively simple to run tests locally from the command line. When you run, you can also add the --coverage flag to get a test coverage report. I think all tests should have the extension .test.ts.

[eshwaribhide]

2. Syntax For Tests & Async Support

I believe commonly for value checking, you'll just use the expect function (Reference). The expect function is generally not called by itself; you use "matcher" functions, like toBe() and toEqual(). So here is a sample test to show syntax:

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

You can do setup/teardown with the beforeEach(), afterEach(), beforeAll(), and afterAll() functions (if necessary).

Jest has support for testing asynchronous code, which is important. There are different ways to do it. I think what we could do is to use the async and await keywords as part of the tests.

[eshwaribhide]

3. Misc

Jest has support for snapshot testing, which is useful for testing React components and will thereby be helpful later on.

It advertises itself as being relatively simple to setup and seems like a good choice.

[jamescd18]

This is great to hear! What sorta stuff will we need to do to set up Jest in the current repo?

[eshwaribhide]

This is great to hear! What sorta stuff will we need to do to set up Jest in the current repo?

I believe this was described in the comments above. But there are two ways to configure jest, either through package.json or through a jest.config.js or jest.config.ts file. I believe I linked this article which showed how to do it through jest.config.js and also on Jest's website they describe how to do it.

[jamescd18]

I was playing with it yesterday and it seems like Jest is included with react-scripts. Are there any configurations we actually would want to adjust?

[eshwaribhide]

I kept on editing the comment again and again because I remember you saying, and also from looking it up, that create-react-app basically gives you Jest, and had added a thing at the bottom saying that and that I didn't necessarily think we needed to do anything extra. and then for some reason second-guessed it and took it out, which was dumb and idk why. So, I don't actually think we need to adjust any configurations.

I think though that maybe one thing to do is add react-test-renderer for adding snapshots, just install with npm.