This package contains utilities for writing end-to-end tests in Fluid Framework. It helps in the creation of a simple hosting application to test Fluid objects and other functionalities of the system.
Internal note: Currently, it also has a load side-effect when loaded under mocha where @fluid-internal/mocha-test-setup is used. The side-effect will attempt to inject an error 15ms before a test case would otherwise timeout.
For a dependency on a Fluid Framework library's public APIs, we recommend a ^ (caret) version range.
For example, use ^1.3.4.
For a dependency on an unstable API, such as a beta API, we recommend a more restrictive version range.
For example, use a ~ version range.
Run this command to install the package:
npm i @fluidframework/test-utils -DThis package uses package.json exports to separate APIs by support level. For information about the support guarantees, read API Support Levels.
Import the public APIs from @fluidframework/test-utils.
Import the legacy APIs from @fluidframework/test-utils/legacy.
Read the @fluidframework/test-utils API documentation at https://fluidframework.com/docs/apis/test-utils.
LocalCodeLoader in localCodeLoader.ts is a simple code loader that can load a Fluid package with a given entry point. It can be used to load multiple different Fluid packages with different sources (IFluidCodeDetails).
It should be created by passing in a list of source to entry point mapping. Then entry point can be an IFluidDataStoreFactory, IRuntimeFactory or a fluidExport:
// The fluidEntryPoint type.
export type fluidEntryPoint = Partial<IProvideRuntimeFactory & IProvideFluidDataStoreFactory & IFluidModule>;
// Constructor for LocalCodeLoader.
constructor(packageEntries: Iterable<[IFluidCodeDetails, fluidEntryPoint]>);On load, it retrieves the fluidEntryPoint matching the package in the IFluidCodeDetails and loads it.
localLoader.ts contains couple of methods:
This method creates a simple Loader that can be used to resolve a Container or request a Fluid object.
It should be created with a list of source to entry point mappings (of type fluidEntryPoint as explained in LocalCodeLoader section above), an ILocalDeltaConnectionServer and an IUrlResolver:
export function createLocalLoader(
packageEntries: Iterable<[
IFluidCodeDetails,
Partial<IProvideRuntimeFactory & IProvideFluidDataStoreFactory & IFluidModule>
]>,
deltaConnectionServer: ILocalDeltaConnectionServer,
urlResolver: IUrlResolver,
): ILoader;- It creates a
LocalCodeLoaderusing thefluidEntryPointlist to load Container code. - It creates a
DocumentServiceFactorywhich serves as the driver layer between the container and the server.
This method creates and attaches a Container with the given source and an attachRequest. An ILoader should also be passed in that will be used to load the Container. The attachRequest format varies per url resolver. Most resolvers have helper methods for creating attach requests. You should use the
helper method on the url resolver passed to the loader to generate the attachRequest:
export async function createAndAttachContainer(
source: IFluidCodeDetails,
loader: ILoader,
attachRequest: IRequest,
): Promise<IContainer>;The usual flow is to create a LocalLoader by calling createLocalLoader and then using it to call createAndAttachContainer. However, this should work with any ILoader.
testFluidObject.ts provides TestFluidObject and TestFluidObjectFactory that help in the testing of Distributed Data Structures (DDS).
It can be used to create a Fluid object (TestFluidObject) with a given set of DDSes which can then be retrieved later as required.
For example, if you need a Fluid object with couple of SharedStrings, a SharedDirectory and a SparseMatrix, create a TestFluidObjectFactory as follows and use this factory to create the Fluid object:
new TestFluidObjectFactory([
[ "sharedString1" /* id */, SharedString.getFactory() ],
[ "sharedString2" /* id */, SharedString.getFactory() ],
[ "directory" /* id */, SharedDirectory.getFactory() ],
[ "matrix" /* id */, SparseMatrix.getFactory() ],
]);The TestFluidObject will then create the above DDSes when initializing and they can then be retrieved by calling getSharedObject on it and providing the id that was used to create it:
const sharedString1 = testFluidObject.getSharedObject<SharedString>("sharedString1");
const sharedString1 = testFluidObject.getSharedObject<SharedString>("sharedString2");
const directory = testFluidObject.getSharedObject<SharedDirectory>("directory");
const matrix = testFluidObject.getSharedObject<SparseMatrix>("matrix");If you want a DDS to be part of the registry so that it can be created later but don't want
TestFluidObjectto create it during initialization, useidasundefinedin theTestFluidObjectFactorycreation.
OpProcessingController provides control over op processing in the tests. It lets you pause and resume the op processing in the containers / fluid objects. It also lets you wait until the ops have been processed by them and the server.
OpProcessingController should be created by passing in the ILocalDeltaConnectionServer that is used in the test. You can then register the Fluid objects / containers whose ops you want to control with it.
For example, consider the scenario where you perform some operations on a DDS and want to verify that the remote client's DDS have applied the operations. You have to wait until the op is sent to the server, the server processes the op, sends it to the remote client and the remote client processes the op.
You can use the OpProcessingController to wait for all that to happen by calling process on it. Check how SharedStringTest does that.
The typical usage for testing a Fluid object is as follows:
-
Create a
LocalDeltaConnectionServer:const deltaConnectionServer: ILocalDeltaConnectionServer = LocalDeltaConnectionServer.create();
-
Create a
LocalResolver:const urlResolver: IUrlResolver = new LocalResolver();
-
Create an
IFluidCodeDetailsand aTestFluidObjectFactorywhich will serve as the Fluid entry point (code details to factory mapping):const codeDetails: IFluidCodeDetails = { package: "sharedStringTestPackage", config: {}, }; const entryPoint = new TestFluidObjectFactory([["sharedString", SharedString.getFactory()]]);
This can replaced by any
IFluidDataStoreFactoryorIRuntimeFactory. When the loader is asked to resolve a Container with the above code details, it will load the above factory. -
Create a local
Loader:const loader: ILoader = createLocalLoader( [[codeDetails, entryPoint]], deltaConnectionServer, urlResolver, );
-
Create and attach a
Containerby giving it adocumentIdwhich is used as a URL to resolve the container:const documentId = "testDocument"; const container = await createAndAttachContainer( codeDetails, loader, urlResolver.createCreateNewRequest(documentId), );
We used the same
IFluidCodeDetailsthat was used to create theLoaderin step 3. -
Get the
Fluid object (TestFluidObject)by usinggetEntryPoint()API onIContainer. Then get theDDSto test:const fluidObject = await container.getEntryPoint(); const sharedString = await fluidObject.getSharedObject<SharedString>("sharedString");
The
ITestFluidObjectwould have already created aSharedStringbased off the parameters we provided when creating theTestFluidObjectFactoryin step 2. -
To truly test collaboration, create a second
Loader,Container,fluid objectandDDSwhich will serve as a remote client:const documentUrl = `https://localhost/${documentId}`; const loader2: ILoader = createLocalLoader( [[codeDetails, entryPoint]], deltaConnectionServer, urlResolver, ); const container2 = await loader2.resolver({ url: documentUrl }); const fluidObject = await container2.getEntryPoint(); const sharedString2 = await fluidObject2.getSharedObject<SharedString>("sharedString");
It is important to use the same
ILocalDeltaConnectionServerto create theLoaderand the samedocumentIdto load theContainer. This will make sure that we load theContainerthat was created earlier and do not create a new one.
These steps are demonstrated in the image below:
Note that the LocalDriver is created by the
createLocalLoadermethod and does not need to explicitly created.
The above usage is taken from SharedStringTest which is a very basic example of how to use these utils.
There are a number of other examples (some a little more complex) in the same directory.
Fluid Framework client libraries support the platforms in this document. These requirements are intentionally restrictive. Within a major version series, we can relax these requirements, but we cannot make them stricter. For a Long Term Support (LTS) version, we might need to support these platforms for several years.
Other configurations can work, but Fluid Framework does not support them. If an unsupported configuration stops working, we do not classify this as a bug. To request support for a configuration that is not listed, file an issue. The product team will evaluate your request. In the issue, specify the current status of the configuration:
- The configuration works but needs official support.
- The configuration does not work and requires changes.
- Fluid Framework supports Node.js versions 22 and 24 while they receive upstream support.
- Fluid Framework will stop support for version 22 when upstream support ends on 2027-04-30.
- Fluid Framework does not support Node.js with the
--no-experimental-fetchflag.
- Fluid Framework supports modern browsers that support the ES2022 standard library.
- TypeScript 6.0:
- Fluid Framework supports all
strictoptions. - Set the build targets (
lib,target) toES2022or later. - Enable
strictNullChecks. - Fluid Framework does not support configuration options deprecated in TypeScript 6.0.
- Fluid Framework does not fully support
exactOptionalPropertyTypes. If you enable this option, do not usein,Reflect.has,Object.hasOwn, orObject.prototype.hasOwnPropertyto narrow members of Fluid Framework types. These methods can incorrectly excludeundefinedfrom the possible values.
- Fluid Framework supports all
- webpack 5
- We do not require a specific bundler. Other bundlers that handle ES Modules can work, but we actively test only webpack.
In TypeScript compilerOptions, use Node16, Node20, NodeNext, or Bundler module resolution.
These settings follow the Node.js v12+ ESM Resolution and Loading algorithm.
Do not use Node10 module resolution.
- ES Modules: Use ES Modules to consume Fluid Framework client packages, including in Node.js.
- CommonJS: Fluid Framework does not officially support CommonJS in version 3.0 or later.
You can contribute to Fluid Framework in these ways:
- Answer questions in GitHub Discussions.
- Submit bug reports and help verify fixes.
- Review source code changes.
- Contribute bug fixes.
For detailed instructions, read the repo documentation.
This project follows the Microsoft Open Source Code of Conduct. For more information, read the Code of Conduct frequently asked questions. For questions or comments, contact opencode@microsoft.com.
This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
Read the Fluid Framework documentation for information about Fluid Framework concepts and APIs.
To request information that the documentation does not contain, create an issue.
This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.
Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
