React

Tools

@loadable/component

loadable 进行加载的组件，在 List 中渲染时，会抛常见的 无 key，错误，尝试读取 displayName 做 key，发现由于组件被高阶包裹，获取了 Lodable 这个不需要的 key，尝试通过 加载文件 index 先预设 displayName 初始值，再在加载完毕后，替换为真实想要设置的 displayName：

  1. import * as loadable from '@loadable/component';
  3. type LoadableComponent<T> = loadable.LoadableComponent<T>;
  5. const load = <T extends unknown>(loaders) => {
  6.   // 每个 loader（() => import()）都是用 loadable.default 进行加载
  7.   return loaders.map((fileLoader, componentIndex: number) => {
  8.     const loadedComponent = loadable.default(() => {
  9.       return fileLoader.then((module, index) => {
  10.         // () => import 加载完毕，读取文件内的信息，设置正确的 displayName  
  11.         loadedComponent.displayName =
  12.           module.INNER_NAME || module?.default.displayName || `Loaded_${index}`;
  13.         return module;
  14.       });
  15.     });
  17.     // Module 未加载完成，使用默认的 displayName
  18.     if (!loadedComponent.displayName || loadedComponent.displayName === 'Loadable') {
  19.       loadedComponent.displayName = `Loadable_${componentIndex}`;
  20.     }
  22.     return loadedComponent;
  23.   }) as T;
  24. };

Test

async, import()

对于 async 类操作，或 import() 动态文件加载，可以使用该方法进行模拟，实际就是一个返回 Promise 的函数
https://jestjs.io/docs/mock-function-api#mockfnmockresolvedvaluevalue

mockFn.mockResolvedValue(value)

Syntactic sugar function for:

  1. jest.fn().mockImplementation(()=>Promise.resolve(value));

Useful to mock async functions in async tests:

  1. test('async test',async()=>{
  2.   const asyncMock = jest.fn().mockResolvedValue(43);
  3.   awaitasyncMock();// 43
  4. });
  1. const resolvedToDefault = value =>
  2.   jest.fn().mockResolvedValue({ default: value })
  4. // 模拟一个 default 导出为 loaded 字符串的 esmodule
  5. const load = resolvedToDefault(() => 'loaded')

Words

比起一种判别法“是什么”，“怎么来的”才更重要

Infos

一些术语
https://docs.google.com/spreadsheets/d/1HL3E_eNF3rI6dy3k7_EpSOLo1eRkBDNIEPeyTg_Eu3s/edit#gid=0
类型术语
https://ice1000.org/notes/chinese-glossary.html