ant-design Tests performance after migration to ant 5

agxfikkp  于 3个月前  发布在  其他
关注(0)|答案(3)|浏览(77)

https://stackblitz.com/edit/stackblitz-starters-kmy51h

Steps to reproduce

Write a component that contains 3 simple DatePicker components and add a test for this component by changing the value of each picker using jest screen.getByRole to identify elements and userEvent API

What is expected?

Performance of the tests to be similar to the one of ant4 components for a smooth migration of projects from antd 4 to 5 version

What is actually happening?

Performace of tests is ~3-4 times slower

EnvironmentInfo
antd5.14.0
React18.2.0
SystemWindows/Linux
BrowserJest

In the sandbox attached to this issue, 2 versions of the tests were added with exactly the same steps, the difference between the 2 is that in one of them a mock was added for cssinjs.

jest.mock('@ant-design/cssinjs', () => ({
  __esModule: true,
  default: jest.fn().mockImplementation((component) => component),
  useStyleRegister: jest.fn().mockImplementation(() => ({})),
  createTheme: jest.fn().mockImplementation(() => ({})),
  Keyframes: jest.fn().mockImplementation(() => ({
    toString: jest.fn().mockReturnValue('keyframeMock'),
  })),
  useCacheToken: jest.fn().mockImplementation(() => []),
}));

The test without a mock runs ~3-4 times slower than the one with the cssinjs mock. And the sandbox component is a simple one, that renders only 3 DatePicker components, we have in our application very complex forms, for which the decrease in performance for tests is drastic.

Initially I though that mocking cssinjs could make the performance issue in tests disappear, but this doesn't seem to be enough for all the ant components, for example for Dropdown component, it also needs a mocked value for the token, and I can solve this issue using:

jest.mock('antd/lib/theme/useToken', () => ({
    __esModule: true,
    default: jest.fn().mockImplementation(() => [{}, mockAntdToken]),
}));

but each individual ant component seems to require something else (for example the grid Row crashes with TypeError: wrapSSR is not a function) and I feel that mocking things for each internal API, without having a single entry point will make the migration impossible

Is there a way to "skip/deactivate/mock" in tests the cssinjs logic and still have functional ant component? This performance issue in tests makes the migration to ant 5 a real pain, without mocking I noticed integration tests increasing the execution time from 5-10s to more than 50s after migration from antd 4 to 5
Can you suggest any other approach?

vql8enpb

vql8enpb2#

@ant-design/cssinjs lib handle the style generation logic and will repeat call the generation if cache not match. Currently it does not provider a simple way to skip the cssinjs generation step in test env.

pvcm50d1

pvcm50d13#

Hello @georgianafilote-pxo. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @georgianafilote-pxo,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

相关问题