= @module-federation/native-federation-tests - v0.2.1

= native-federation-tests

Bundler agnostic plugins to share federated components for testing purposes.

It aims to work for both https://vitest.dev/[vitest]  and https://vitest.dev/[vitest] https://jestjs.io/[jest] .

== Install

[source, javascript]
----
npm i -D @module-federation/native-federation-tests

----

This module provides two plugins:

=== NativeFederationTestsRemote

This plugin is used to concat the components that will be used in tests.

==== Configuration

[source, javascript]
----
{
    moduleFederationConfig: any; // the same configuration provided to the module federation plugin, it is MANDATORY
    additionalBundlerConfig?: TsupOptions; // additional `tsup` build options that will be merged with the one generated by the plugin, default is {}
    distFolder?: string; // folder used to store the dist, default is './dist'
    testsFolder?: string; // folder where all the files will be stored, default is '@mf-tests'
    deleteTestsFolder?: boolean; // indicate if the concatenated components folder will be deleted when the job completes, default is 'true'
}

----

==== Additional configuration

Note that, for Webpack, the plugin automatically inject the `devServer.static.directory` configuration.For the other bundlers, you should configure it by yourself.

=== NativeFederationTestsHost

This plugin is used to download the concatenated components mock that will be used for tests.

=== Configuration

[source, javascript]
----
{
    moduleFederationConfig: any; // the configuration same configuration provided to the module federation plugin, it is MANDATORY
    testsFolder?: string; // folder where all the files have been stored, default is '@mf-tests',
    mocksFolder?: string; // folder where the concatenated files will be stored, default is './  mocks  ',
    deleteTestsFolder?: boolean; // indicate if the tests mock folder will be deleted before the job starts, default is 'true'
}

----

== Bundler configuration

[source, javascript]
----
// vite.config.ts
import {NativeFederationTestsHost, NativeFederationTestsRemote} from '@module-federation/native-federation-tests/vite'
export default defineConfig({
  plugins: [
    NativeFederationTestsRemote({ /* options */ }),
    NativeFederationTestsHost({ /* options */ }),
  ],
  /* ... */
  server: { // This is needed to emulate the devServer.static.directory of WebPack and correctly serve the zip file
    /* ... */
    proxy: {
      '/@mf-types.zip': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          rewrite: () => `/@fs/${process.cwd()}/dist/@mf-types.zip`
      }
    },
    fs: {
      /* ... */
      allow: ['./dist']
      /* ... */
    }
  }
})

----

[source, javascript]
----
// rollup.config.js
import {NativeFederationTestsHost, NativeFederationTestsRemote} from '@module-federation/native-federation-tests/rollup'
export default {
  plugins: [
    NativeFederationTestsRemote({ /* options */ }),
    NativeFederationTestsHost({ /* options */ }),
  ],
}

----

[source, javascript]
----
// webpack.config.js
const {NativeFederationTestsHost, NativeFederationTestsRemote} = require('@module-federation/native-federation-tests/webpack')
module.exports = {
  /* ... */
  plugins: [
    NativeFederationTestsRemote({ /* options */ }),
    NativeFederationTestsHost({ /* options */ })
  ]
}

----

[source, javascript]
----
// esbuild.config.js
import { build } from 'esbuild'
import {NativeFederationTestsHost, NativeFederationTestsRemote} from '@module-federation/native-federation-tests/esbuild'
build({
  plugins: [
    NativeFederationTestsRemote({ /* options */ }),
    NativeFederationTestsHost({ /* options */ })
  ],
})

----

[source, javascript]
----
// rspack.config.js
const {NativeFederationTestsHost, NativeFederationTestsRemote} = require('@module-federation/native-federation-tests/rspack')
module.exports = {
  /* ... */
  plugins: [
    NativeFederationTestsRemote({ /* options */ }),
    NativeFederationTestsHost({ /* options */ })
  ]
}

----

== Examples

To use it in a `host` module, refer to https://github.com/module-federation/module-federation-examples/tree/master/native-federation-tests-typescript-plugins/host[this example] .To use it in a `remote` module, refer to https://github.com/module-federation/module-federation-examples/tree/master/native-federation-tests-typescript-plugins/host[this example] https://github.com/module-federation/module-federation-examples/tree/master/native-federation-tests-typescript-plugins/remote[this example] .