Jest test methods

1. Format

   expect(A).ValidateItem() is used in React testing library and Jest to verify functionality.

   Expect() Assertion Summary 1

   [Expect() Assertion Summary 2](https://www.w3cschool.cn/jest_cn/ jest_expect.html)

​

2. Usage

   1. Test call/disable

      expect() parameters	Validation item method	meaning
      events such as onClick	toBeCalled()	expect to be called
      events such as onClick	toBeCalledTimes(x)	expect to be called x times
      button	toBeCalledWith(x)	Expected to be called by the x event
      button	toBeDisabled()	expect button to be disabled

   
   

   2. Value comparison

      expect() parameters	Validation item method	meaning
      input	toHaveValue(x)	expect input value x
      DOM	toHaveClass(x)	expects DOM to have className x
      DOM	toHaveTextContent(x)	expects DOM to have literal x
      DOM	toHaveTextContent(x)	expects DOM to have literal x
      Hook, value, other	toBe()	expect equal
      variable name	toBeWithinRange(a, b)	Expected value is in range
      properties/properties of the axe result	toHaveLength(x)	expect arr length equal to x

   
   

   3. Component testing

      expect() parameters	Validation item method	meaning
      asFragment()	toMatchSnapshot()	Expect no changes to components
      queryByX(‘x’)	toBeNull()	expect component x not to be rendered
      queryByX(‘x’)	(.not).toBeInTheDocument()	expect component x (not) in file

      
      

   4. jest-axe method

      expect() parameters	Validation item method	meaning
      axe result	toHaveNoViolations(0)	axe’s violations array has length 0

      
      

   5. Other usage

      1. Test whether a child element contains a class name

         test("Test whether the child element contains a class name", () => {
           const Demo = ({ loading }) => (
             <button aria-label="Button">
               <span className={loading ? "loading" : "button"}>button</span>
             </button>
           );
           const { baseElement } = render(<Demo loading />);
           const ele = baseElement.getElementsByClassName("loading");
           expect(ele.length).toBe(1);
         });

      
      

3. Test the asynchronous call event

   await waitFor(() => expect(fn).toBeCalledWith("click"));

   test('is divisible by external value', async () => {
      await expect(100).toBeDivisibleByExternalValue();
      await expect(101).not.toBeDivisibleByExternalValue();
   });

   await waitForNextUpdate(); Wait for the next update, default will wait 1000 milliseconds.

   
   

4. Timer

   e=method	meaning
   jest.useFakeTimers()	use fakeTimer
   jest.runAllTimers()	execute all timers
   jest.useRealTimers()	use realTimer

​

5. Custom matcher function

   Similar to expect.toXXXX() , we can customize the matcher function.

   import {expect} from '@jest/globals';
   
   function toBeWithinRange(actual, floor, ceiling) {
      if (
        typeof actual !== 'number' ||
        typeof floor !== 'number' ||
        typeof ceiling !== 'number'
      ) {
        throw new Error('These must be of type number!');
      }
   
      const pass = actual >= floor && actual <= ceiling;
      if (pass) {
        return {
          message: () =>
            `expected ${this.utils.printReceived(
              actual,
            )} not to be within range ${this.utils.printExpected(
              `${floor} - ${ceiling}`,
            )}`,
          pass: true,
        };
      } else {
        return {
          message: () =>
            `expected ${this.utils.printReceived(
              actual,
            )} to be within range ${this.utils.printExpected(
              `${floor} - ${ceiling}`,
            )}`,
          pass: false,
        };
      }
   }
   
   expect.extend({
      toBeWithinRange,
   });