purescript-elmish-enzyme

elmish-enzyme is a testing library for Elmish which provides bindings for Enzyme, a React testing library. Enzyme allows mounting a component, then interacting with it and testing properties of the component. This library offers a monadic API around Enzyme, which lets you write tests like this:

import Elmish.Enzyme (testComponent, text, find, at, simulate, (>>))

someTest = describe "card button" do
  it "opens modal on click" do
    testComponent myComponent do
      find ".card" >> at 3 >> find "button" >> simulate "click"
      find ".modal" >> text >>= shouldEqual "Modal content"

To start using this library, you’ll need to install Enzyme and JSDOM.

npm install enzyme jsdom global-jsdom --save-dev

JSDOM is a lightweight library which emulates, to some degree, a web browser. Enzyme relies on it for “Full DOM Rendering.” As stated in the Enzyme docs, JSDOM should be configured before React is required. To do this, you can require it in your main test module’s FFI, like so:

// test/Main.js

const jsdom = require('global-jsdom')

jsdom()

exports._configureJsDomViaFfi = null

-- test/Main.purs

foreign import _configureJsDomViaFfi :: Type

You’ll also need to install an adapter for whichever version of React you’re using. Install an adapter from the list below, e.g.:

npm install enzyme-adapter-react-16 --save-dev

Then configure enzyme to use it in your main test module:

main = do
  Enzyme.configure Adapter.react_16_4
  launchAff_ $ runSpec [specReporter] spec

This library supports the following adapters:

Examples of how to write tests can be found in the test folder.