smalljs$molSearch⌘ KDocsPlaygroundCompareEcosystemAboutEN
TestingGetting StartedIntroductionMental modelGetting StartedFrom TypeScript to view.treeProject StructureToolingEssentialsInstallationViewsState & ReactivityRoutingRenderingTestingDeploymentTroubleshootingDataData FetchingData SchemasGiper BazaMoreShowcaseFrom React, Vue & SvelteCookbookAdvancedPluginsModule metadataOfflineGhost viewsAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Testing

A $mol view is a function of its state, and that changes what a test looks like. A user scenario is written as calls to the view's own methods: set the draft, run the action, read what the user would see.1app.draft( 'Milk' )2app.add()3$mol_assert_equal( app.item_title( 0 ), 'Milk' )No selectors, no browser, no Playwright or Cypress, no waiting for anything. The same file also gives you:Speed. Tests run in Node in milliseconds; a thousand of them take about a minute. node my/hello/-/node.test.js runs the ones for a module.Zero setup. A hello.test.ts next to the component is picked up by the builder and compiled into -/node.test.js. Continuous integration with mam_build runs it and fails the build when a test fails.Service substitution through the context. Every test gets its own $, and everything a component reaches through this.$.X is swapped by assigning a test double to that $. That is the reason to write this.$.$mol_fetch rather than $mol_fetch: the first one is replaceable, the second one is not.Mocked time. Timers created through the context do not tick on their own; $mol_after_mock_warp() runs whatever is queued.A real DOM when you need one. The Node bundle carries jsdom, so dom_node() and querySelectorAll work in the same test file.

A scenario through view methods

Take the todo list from the Cookbook: a draft? string, an items list, an add action and a delete action. Its test lives in my/todo/todo.test.ts:1namespace $ {2 $mol_test({3 4 'add an item and delete it'( $ ) {5 const app = $my_todo.make({ $ })6 7 app.draft( 'Milk' )8 app.add()9 $mol_assert_equal( app.items().length, 1 )10 $mol_assert_equal( app.item_title( 0 ), 'Milk' )11 $mol_assert_equal( app.draft(), '' )12 13 app.delete( 0 )14 $mol_assert_like( app.item_rows(), [] )15 },16 17 'blank draft adds nothing'( $ ) {18 const app = $my_todo.make({ $ })19 20 app.draft( ' ' )21 app.add()22 $mol_assert_like( app.items(), [] )23 },24 25 })26}Edit this page on GitHubWas this helpful?YesNoPreviousRenderingNextDeploymentOn this pageA scenario through view methodsMocking a serviceTimeThrough the DOMWhat a Node test does not coverPractical notesNext
Type to search the documentation.