Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

Jest testing 測試

Jest / Expect

https://jestjs.io/docs/en/expect

  • expect(value)
  • expect.extend(matchers)
  • expect.anything()
  • expect.any(constructor)
  • expect.arrayContaining(array)
  • expect.assertions(number)
  • expect.hasAssertions()
  • expect.not.arrayContaining(array)
  • expect.not.objectContaining(object)
  • expect.not.stringContaining(string)
  • expect.not.stringMatching(string | regexp)
  • expect.objectContaining(object)
  • expect.stringContaining(string)
  • expect.stringMatching(string | regexp)
  • expect.addSnapshotSerializer(serializer)
  • .not
  • .resolves
  • .rejects
  • .toBe(value)
  • .toHaveBeenCalled()
  • .toHaveBeenCalledTimes(number)
  • .toHaveBeenCalledWith(arg1, arg2, ...)
  • .toHaveBeenLastCalledWith(arg1, arg2, ...)
  • .toHaveBeenNthCalledWith(nthCall, arg1, arg2, ....)
  • .toHaveReturned()
  • .toHaveReturnedTimes(number)
  • .toHaveReturnedWith(value)
  • .toHaveLastReturnedWith(value)
  • .toHaveNthReturnedWith(nthCall, value)
  • .toHaveLength(number)
  • .toHaveProperty(keyPath, value?)
  • .toBeCloseTo(number, numDigits?)
  • .toBeDefined()
  • .toBeFalsy()
  • .toBeGreaterThan(number | bigint)
  • .toBeGreaterThanOrEqual(number | bigint)
  • .toBeLessThan(number | bigint)
  • .toBeLessThanOrEqual(number | bigint)
  • .toBeInstanceOf(Class)
  • .toBeNull()
  • .toBeTruthy()
  • .toBeUndefined()
  • .toBeNaN()
  • .toContain(item)
  • .toContainEqual(item)
  • .toEqual(value)
  • .toMatch(regexp | string)
  • .toMatchObject(object)
  • .toMatchSnapshot(propertyMatchers?, hint?)
  • .toMatchInlineSnapshot(propertyMatchers?, inlineSnapshot)
  • .toStrictEqual(value)
  • .toThrow(error?)
  • .toThrowErrorMatchingSnapshot(hint?)
  • .toThrowErrorMatchingInlineSnapshot(inlineSnapshot)

testing-library / jest-dom

https://github.com/testing-library/jest-dom

  • toBeDisabled
  • toBeEnabled
  • toBeEmpty
  • toBeEmptyDOMElement
  • toBeInTheDocument
  • toBeInvalid
  • toBeRequired
  • toBeValid
  • toBeVisible
  • toContainElement
  • toContainHTML
  • toHaveAttribute
  • toHaveClass
  • toHaveFocus
  • toHaveFormValues
  • toHaveStyle
  • toHaveTextContent
  • toHaveValue
  • toHaveDisplayValue
  • toBeChecked
  • toBePartiallyChecked
  • toHaveDescription

Change data-testid,不使用預設的 testid 作為抓取的標記

configure({testIdAttribute: 'not-data-testid'})

https://testing-library.com/docs/dom-testing-library/api-configuration

Snapshot Testing

https://jestjs.io/docs/en/snapshot-testing

Jest JS

https://jestjs.io/docs/zh-Hans/api

  • Mock
jest.mock('@/services/xxx');

window.scrollTo = jest.fn();

jest.doMock()
jest.fn()

常用 Methods

describe('useFoo', () => {
  test('Bar', () => {
    const { result } = renderHook(() => useFoo());

    act(() => result.current.handleClick());

    expect(result.current.items.baz).toBe(true);
    // toEqual 用於比較 object
  });
});

describe.each(table)(name, fn, timeout)

Use describe.each if you keep duplicating the same test suites with different data. describe.each allows you to write the test suite once and pass data in.

table: Array of Arrays with the arguments that are passed into the fn for each row.
name: String the title of the test suite.

fn: Function the suite of tests to be ran, this is the function that will receive the parameters in each row as function arguments.

describe.each([
  [1, 1, 2],
  [1, 2, 3],
  [2, 1, 3],
])('.add(%i, %i)', (a, b, expected) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

Jest

可以用的比對 functions

.toBeTruthy();
.toBeFalsy();
.toBe(789);
.toHaveBeenCalled();

Jest CLI Options

jest (Watch Usage) 可用參數

› Press o to only run tests related to changed files. (不會全部跑)


› Press f to run only failed tests.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.

測試流程:

  1. Local: localhost
  2. DEV: 開發者用的機器
  3. SIT: 測試資料、只有內網可以連 (or VPN)
  4. UAT: production 資料、外網要先打帳號密碼才能連