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 --coverage=false
  https://jestjs.io/docs/en/cli#--coverageboolean
  Indicates that test coverage information should be collected and reported in the output.

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 資料、外網要先打帳號密碼才能連