3. Testing

Create-react-app includes jest test runner so you should just be able to write tests and run them using that. Ok so that doesnt work with typescript or something so... you need to...

• Install a bunch of packages
• • jest jest-cli ts-jest react-test-renderer
• Also sometimes maby babel is required ?
• yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript
• • Add a configuration file for babel .babelrc.js and add som stuff to it

module.exports =  api => { 
    // Testing if babel is being run in test mode
    const isTest = api.env("test");
    /* Cache the returned value forever and don't call this function again. This is the default behavior but since we
     * are reading the env value above, we need to explicitly set it after we are done doing that, else we get a
     * caching was left unconfigured error. */
    api.cache(true);

    return {
        "presets": [ 
            '@babel/preset-react', // For transformation of JSX and other react related bable plugins
            '@babel/preset-typescript', // Enabling Babel to understand TypeScript
            [
                "@babel/preset-env", // Allows smart transpilation according to target environments
                {
                    targets: {
                        node: "current", // Target your current version of Node
                        browsers: ["last 2 versions"], // Specifying which browser versions you want to transpile down to
                    },
                    /* Specifying what module type should the output be in.
                     * For test cases, we transpile all the way down to commonjs since jest does not understand TypeScript.
                     * For all other cases, we don't transform since we want Webpack to do that in order for it to do
                     * dead code elimination (tree shaking) and intelligently select what all to add to the bundle. */
                    modules: isTest ? 'commonjs' : false,
                }, 
            ],      
        ],
    };
};

• Add jest.config.js file

module.export = {
    roots: ['/src'],
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    setupFilesAfterEnv: ['@testing-library/react/cleaup-after-each', '@testing-library/jest-dom/extended-expect'],
    testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

• Add scripts to package.json

"scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
}

• Ensure your tsconfig. has the esModuleInterop flag enabled for compatibility with Jest (and Babel)

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

• To ensure the additional Jest matchers are available for all test files, create a src/globals.d.ts and import the matchers:

import "@testing-library/jest-dom/extend-expect";

Trying to run jest mock fetch test

• Getting a bunch off errors ("Not defined etc")
• Importing shit to get this working npm i whatwg-fetch --save-dev yarn add regenerator-runtime --dev
• Modify package.json
• Exclude from webpack
• More information coming...
• • Display testing coverage
• • Editor integration