Please enable JavaScript.

Coggle requires JavaScript to display documents.

React Testing - Coggle Diagram

- - - - 1 import Enzyme, { shallow } from 'enzyme';
        import EnzymeAdapter from 'enzyme-adapter-react-16'; :pencil2:
      - 2 Enzyme.configure({ adapter: new EnzymeAdapter() }); :pencil2:
      - add 1 test function
        
        3 test('renders without error', () => {}
      - re-useable setup() and findByTestAttr() function
        
        /**
        
        Factory function to create a ShallowWrapper for the App component.
        
        function setup
        
        param {object} props - Component props specific to this setup.
        
        returns {ShallowWrapper}
        */
        const setup = (props={}) => {
        return shallow(<App { ...props }/>)
        }
        
        /**
        
        Return ShallowWrapper containing node(s) with the given data-test value.
        
        param {ShallowWrapper} wrapper - Enzyme shallow wrapper to search within.
        
        param {string} val - Value of data-test c1scoL0ve!
        
        */
        const findByTestAttr = (wrapper, val) => {
        return wrapper.find([data-test="${val}"]);
        }
        
        test('renders without error', () => {
        const wrapper = setup();
        const appComponent = findByTestAttr(wrapper, 'component-app');
        expect(appComponent.length).toBe(1);
        });
  - - - happen before each test- save some code :<3:
    - - .only
        describe.only()
        
        only run test/describe with .only specified
      - .skip
        
        don't run any test/describe with .skip specified
      - good for isolating test or skipping test to filter out irrelevant test results until ready
      - .todo
        
        Use test.todo when you are planning on writing tests. These tests will be highlighted in the summary output at the end so you know how many tests you still need todo.
  - - - Package.json need to add something on env-production
      - This is useful when using selectors like data-test to run selenium test. Those properties are useless when running the code in production. You can save bandwidth by removing them.
      - npm run eject :!!:
        
        It moves create-react-app’s configuration files and dev/build/test scripts into you app directory.
        If you don’t have a need to modify the config or scripts you don’t need to eject. Doing so will prevent you from being able to update to new versions of create-react-app.
        
        you can’t undo it.
- - - - Test tightly coupled with code
      - Unit test are very isolated
      - test are easy to diagnose
- - - - mocking
        
        isolated,faster if many children
        
        farther from actual code, need to duplicate selector function
        
        redux-mock-store can test intermediate actions
        
        can't test changes to state
  - - - closer to actual code
      - less isolated, slower if many children
- - - - test description provide better documentation
      - failure counts give better indication of state of code
        
        test stop at first failure
      - can use beforeEach() for common setup
- - - - can run alternate code,or just act as a placeholder
    - - Keep real function from running
        
        prevent side-effect like network calls
      - spy on function to see when it's called
      - provide return values
        
        set up test conditions
    - - Do not destructure useState on import ,like import { useState } from "react"
        
        pros: cleaner production code
        
        cons : test code more complicated
      - import React from "react"
        
        const [state,setState]=React.useState() :<3:
      - Only work with React.useState()
      - multiple useState statements
        
        option 1 : useReducer
        
        option 2 : skip unit tests and to straight to functional tests
    - - Global mock file can be use with locate in a special directory name mocks
        
        Node modules -opt out
        
        project module (\src)-- opt in
        
        test file import from mocks file instead of actual module
      - Mocks reset automatically before each test
        (a problem if you've specified a return value)
      - mock tracks calls cumulatively until reset
        
        clear mock using .mockClear()
- - - - Test installs moxios
        
        test specifies moxios response
        
        axios will send request to moxios instead of http
      - test calls action creator
      - action creator call axios
        
        axios uses moxios instead of http for request
      - action creator receives moxios response from axios
    - - moxios.install()
        
        sets moxios as the axios adapter
        
        set moxios as the axios adapter
        
        routes axios calls to moxios instead of http
        
        can pass axios Instance to moxios.install()
        
        use configuration settings
        
        leave param blank for default settings
      - moxios.wait()
        
        call moxios.wait() during test
        
        watches for axios calls
        
        moxios.requests.mostRecent()
        
        request.respondwith({
        status:200
        response: secretWors})
      - import moxios from 'moxios';
        describe('moxios tests', () => {
        beforeEach(() => {
        moxios.install();
        });
        afterEach(() => {
        moxios.uninstall();
        });
        ....
        }
    - - npm install axios
      - npm install --save-dev moxios