• Stars
    star
    249
  • Rank 157,056 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Full redux environment testing helper for redux-saga

redux-saga-tester

Full redux environment testing helper for redux-saga.

redux-saga is a great library that provides an easy way to test your sagas step-by-step, but it's tightly coupled to the saga implementation. Try a non-breaking reorder of the internal yields, and the tests will fail.

This tester library provides a full redux environment to run your sagas in, taking a black-box approach to testing. You can dispatch actions, observe the state of the store at any time, retrieve a history of actions and listen for specific actions to occur.

Getting Started

Installation

$ npm install --save-dev redux-saga-tester

Basic Example

Suppose we have a saga that waits for a START action, performs some async (or sync) actions (eg. fetching data from an API), and dispatches a SUCCESS action upon completion. Here's how we would test it:

import ourSaga from './saga';

describe('ourSaga test', () => {
    let sagaTester = null;

    beforeEach(() => {
        // Init code
        sagaTester = new SagaTester({ initialState });
        sagaTester.start(ourSaga);
    });

    it('should retrieve data from the server and send a SUCCESS action', async () => {
        // Our test (Actions is our standard redux action component). Start the saga with the START action
        sagaTester.dispatch(Actions.actions.start());

        // Wait for the saga to finish (it emits the SUCCESS action when its done)
        const successAction = await sagaTester.waitFor(Actions.types.SUCCESS);

        // Check that the success action is what we expect it to be
        expect(successAction).to.deep.equal(
            Actions.actions.success({ data: expectedData })
        );
    });
});

This is of course an example of testing a saga that contains async actions. Generally when testing it is perferred to use sync mocks. In that case, there's no need to async/await.

Full example

Can be found under the examples directory.

import chaiAsPromised from 'chai-as-promised';
import { call, take, put } from 'redux-saga/effects';
import SagaTester from 'redux-saga-tester';

chai.use(chaiAsPromised);

const someValue = 'SOME_VALUE';
const someResult = 'SOME_RESULT';
const someOtherValue = 'SOME_OTHER_VALUE';
const middlewareMeta = 'MIDDLEWARE_TEST';
const fetchRequestActionType = 'FETCH_REQUEST'
const fetchSuccessActionType = 'FETCH_SUCCESS'

const initialState = { someKey : someValue };
const reducer = (state = someValue, action) =>
    action.type === fetchSuccessActionType ? someOtherValue : state;
const middleware = store => next => action => next({
    ...action,
    meta : middlewareMeta
});
// options are passed to createSagaMiddleware
const options = { onError => console.error.bind(console) }
const fetchApi = () => someResult;

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))

function* listenAndFetch() {
    yield take(fetchRequestActionType);
    const result = yield call(fetchApi);
    yield call(delay, 500); // For async example.
    yield put({ type : fetchSuccessActionType, payload : result });
}

it('Showcases the tester API', async () => {
    // Start up the saga tester
    const sagaTester = new SagaTester({
        initialState,
        reducers : { someKey : reducer },
        middlewares : [middleware],
        options,
    });
    sagaTester.start(listenAndFetch);

    // Check that state was populated with initialState
    expect(sagaTester.getState()).to.deep.equal(initialState);

    // Dispatch the event to start the saga
    sagaTester.dispatch({type : fetchRequestActionType});

    // Hook into the success action
    await sagaTester.waitFor(fetchSuccessActionType);

    // Check that all actions have the meta property from the middleware
    sagaTester.getCalledActions().forEach(action => {
        expect(action.meta).to.equal(middlewareMeta)
    });

    // Check that the new state was affected by the reducer
    expect(sagaTester.getState()).to.deep.equal({
        someKey : someOtherValue
    });

    // Check that the saga listens only once
    sagaTester.dispatch({ type : fetchRequestActionType });
    expect(sagaTester.numCalled(fetchRequestActionType)).to.equal(2);
    expect(sagaTester.numCalled(fetchSuccessActionType)).to.equal(1);

    // Reset the state and action list, dispatch again
    // and check that it was called
    sagaTester.reset(true);
    expect(sagaTester.wasCalled(fetchRequestActionType)).to.equal(false);
    sagaTester.dispatch({ type : fetchRequestActionType });
    expect(sagaTester.wasCalled(fetchRequestActionType)).to.equal(true);
})

API

new SagaTester(options) => sagaTester

Create a new SagaTester instance.

  1. options: Object
    • initialState : Object
    • reducers : Object | Function
    • middlewares : Array[Function]
    • combineReducers : Function
    • ignoreReduxActions : Boolean
    • options : Object
      • Options for createSagaMiddleware (see docs).

sagaTester.start(saga, [...args])

Starts execution of the provided saga.

  1. saga : Function
    • The saga generator function to start
  2. [...args] : Any
    • Optional Arguments to pass to the generator on start

sagaTester.dispatch(action)

Dispatches an action to the redux store.

sagaTester.updateState(newState)

Assigns the newState into the current state. (Only works with the default reducer.)

sagaTester.getState() => Object

Returns the state of the redux store.

sagaTester.waitFor(actionType, futureOnly) => Promise<action>

Returns a promise that will resolve if the specified action is dispatched to the store.

  1. actionType : String
  2. futureOnly : Boolean
    • Causes waitFor to only resolve if the action is called in the future.

The promise resolves with the matching action object.

sagaTester.wasCalled(actionType) => Boolean

Returns whether the specified was dispatched in the past.

sagaTester.numCalled(actionType) => Number

Returns the number of times an action with the given type was dispatched.

sagaTester.getLatestCalledAction() => Action

Returns the last action dispatched to the store.

sagaTester.getCalledActions() => Array[Actions]

Returns an array of all actions dispatched.

sagaTester.reset(clearActionList)

Reset the store state back to initialState.

  1. clearActionList : Boolean
    • Clears the history of past actions (defaults to false).

More Repositories

1

react-native-interactable

Experimental implementation of high performance interactable views in React Native
JavaScript
5,171
star
2

react-templates

Light weight templates for react
JavaScript
2,813
star
3

vscode-glean

The extension provides refactoring tools for your React codebase
TypeScript
1,455
star
4

mjml-react

React component library to generate the HTML emails on the fly
JavaScript
980
star
5

react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor
HTML
838
star
6

react-native-keyboard-input

Use your own custom input component instead of the system keyboard
Objective-C
797
star
7

wml

An alternative to symlinks that actually copies changed files from source to destination folders
JavaScript
769
star
8

angular-tree-control

Angular JS Tree
HTML
709
star
9

DetoxInstruments

Detox Instruments is a performance–analysis and testing framework, designed to help developers profile their mobile apps in order to better understand and optimize their app's behavior and performance.
Objective-C
621
star
10

react-native-controllers

Native IOS Navigation for React Native (navbar, tabs, drawer)
Objective-C
610
star
11

react-native-autogrow-textinput

Objective-C
540
star
12

accord

Accord: A sane validation library for Scala
Scala
534
star
13

react-native-crash-course

The React Native crash course by Wix is a self-learning course designed to help you learn everything you need to know before diving into writing production code in React Native.
JavaScript
525
star
14

react-native-keyboard-aware-scrollview

Created by artald
JavaScript
485
star
15

wix-embedded-mysql

embedded mysql based on https://github.com/flapdoodle-oss/de.flapdoodle.embed.process
Java
379
star
16

DetoxRecorder

Detox Recorder is a utility for recordings steps for a Detox test as you use your app in Simulator. After recording the test, add expectations that check if interface elements are in the expected state.
Objective-C
286
star
17

react-dataflow-example

Experimenting with different dataflow approaches for a real life React app
JavaScript
279
star
18

eslint-plugin-lodash

ESLint rules for lodash
JavaScript
272
star
19

pro-gallery

Blazing fast & beautiful galleries built for the web
JavaScript
265
star
20

quix

Quix Notebook Manager
TypeScript
265
star
21

petri

Wix experiment system (A/B test and feature toggle framework)
JavaScript
264
star
22

react-native-wordpress-editor

React Native Wrapper for WordPress Rich Text Editor
Objective-C
246
star
23

redux-testkit

Complete and opinionated testkit for testing Redux projects (reducers, selectors, actions, thunks)
JavaScript
227
star
24

remx

Opinionated mobx
JavaScript
221
star
25

exodus

Easily migrate your JVM code from Maven to Bazel
Scala
221
star
26

react-native-action-view

An easy to use component that allows displaying swipeable buttons with a variety of transitions.
Objective-C
187
star
27

tdd-katas

TDD katas
JavaScript
175
star
28

react-native-custom-segmented-control

Custom version of the IOS SegmentedControl component
Objective-C
168
star
29

repluggable

Pluggable micro frontends in React+Redux apps
TypeScript
166
star
30

lerna-script

Lerna addon for adding custom tasks
JavaScript
164
star
31

react-native-wix-engine

Java
164
star
32

angular-widget

Lazy load isolated micro-apps in Angular
JavaScript
163
star
33

angular-viewport-watch

Angular directive that disables watchers in scopes out of viewport
JavaScript
148
star
34

react-native-keyboard-tracking-view

Objective-C
134
star
35

kampos

Tiny and fast effects compositor on WebGL
JavaScript
129
star
36

react-native-swipe-view

Native container for a React Native view which supports swipe behavior (for swipe to delete and such)
Java
124
star
37

list-view-experiments

React Native ListView Experiments
Objective-C
123
star
38

rn-perf-experiments

Various performance experiments with React Native over a swipeable card pattern
JavaScript
119
star
39

rn-perf-experiments2

React Native performance experiments revisited
JavaScript
115
star
40

codio

A media format to record and playback the process of programming
Kotlin
105
star
41

rn-synchronous-render

Experiments with synchronous rendering in React Native
Objective-C
104
star
42

react-native-gifted-chat

JavaScript
99
star
43

as-typed

Ambient mapping from JSON schema to typescript
TypeScript
98
star
44

playable

No hassle, no fuss, just nice and easy video player
TypeScript
95
star
45

tspoon

(DEPRECATED) AST visitors for TypeScript
TypeScript
83
star
46

remote-dom

JavaScript
82
star
47

react-native-paged-contacts

Paged contacts for React Native
Java
80
star
48

react-native-newrelic

New Relic reporting for React Native
JavaScript
79
star
49

obsidian

Dependency injection library for React and React Native applications
TypeScript
74
star
50

react-module-container

Small library for building micro apps in React and Angular
JavaScript
68
star
51

react-native-repackager

Custom extensions for react-native packager
JavaScript
67
star
52

rapido

🏃 A site performance test kit, built using Chrome's DevTools.
JavaScript
63
star
53

BindingListView

React Native ListView experimental implementation supporting direct view binding
Objective-C
62
star
54

rawss

Generic CSS polyfill framework, with a CSS variables implementation
TypeScript
59
star
55

wix-animations

Tools for easy and simple animating capabilities
JavaScript
59
star
56

haste

An extendable, blazing fast build system that cares about user experience
JavaScript
58
star
57

kafka-connect-s3

A Kafka-Connect Sink for S3 with no Hadoop dependencies.
Java
56
star
58

unidriver

UniDriver - Universal Component Drivers 🚀
TypeScript
53
star
59

carmi

CARMI - Compiler for Automatic Reactive Modelling of Inference
JavaScript
49
star
60

mobile-crash-course

Crash course for engineers in Wix to start working on the mobile stack
49
star
61

react-native-extended-cli

Extended CLI with convenient scripts and utilities for developing React Native apps
Shell
47
star
62

protractor-helpers

Set of matchers, locators, and helper functions for Protractor
JavaScript
46
star
63

Kompot

Component testing for React Native using Detox
JavaScript
45
star
64

future-perfect

A helper for Futures covering non-functional concerns such as retries, timeouts and reporting
Scala
44
star
65

mjml-react-example

mjml-react example project
JavaScript
42
star
66

specs2-jmock

This is a specs2 adapter + DSL for using the popular mocking framework JMock
Scala
41
star
67

corvid

Download your Wix site, code in a local IDE, collaborate, use git, and more!
JavaScript
39
star
68

javascript-essentials

Essential reading and learning materials for Wix client-side engineers
37
star
69

fed-training-kit

A self-guided onboarding kit for new FED Guild members
JavaScript
35
star
70

commons-validator-js

JavaScript port of Apache Commons Validator
JavaScript
35
star
71

DeviantArt-API

The DeviantArt API
35
star
72

redux-cornell

A Redux library which helps reduce boilerplate
TypeScript
34
star
73

wix-http-testkit

Tools for testing HTTP services
Scala
34
star
74

DetoxSync

Synchronization framework for Detox and other testing frameworks
Objective-C
34
star
75

enzyme-drivers

Enzyme Drivers is a JavaScript library that makes react component testing with enzyme a lot easier and fun to write
JavaScript
33
star
76

mutable

State containers with dirty checking and more
JavaScript
32
star
77

eyes.it

Add screenshot comparison to existing protractor tests simply by changing `it` to `eyes.it`
JavaScript
31
star
78

react-native-sane-listview

Why do we need all this datasource nonsense?!
JavaScript
31
star
79

wix-ui-backoffice

Common React UI components for all Wix backoffice React applications
TypeScript
31
star
80

turnerjs

An angular test kit for components and directives. See:
TypeScript
29
star
81

zorechka-bot

Github bot for keeping your Bazel dependencies up-to-date and clean
Scala
27
star
82

Koboshi

Obsessed with your precious data
Scala
27
star
83

react-popup-manager

Manage react popups, Modals, Lightboxes, Notifications
TypeScript
26
star
84

sample-wix-rest-app

JavaScript
24
star
85

wix-react-native-storybook-template

Server to host storybook for react native apps
JavaScript
24
star
86

wix-code-docs

Wix Code Reference Documentation - docworks jsons
JavaScript
24
star
87

hello-react-templates

Starter project for react-templates
JavaScript
24
star
88

react-native-open-file

Objective-C
24
star
89

isolated-runtime

Run untrusted Javascript code in a multi-tenant, isolated environment
JavaScript
23
star
90

react-hoverbox

Created by malsomnus
JavaScript
23
star
91

react-sequence-animator

A React library for sequence animations
TypeScript
23
star
92

fast-boot

Caching of the FS location of node modules between node process startups
JavaScript
22
star
93

wixmadefor

Wix Madefor font
Python
22
star
94

svg2react-icon

Generate React icon components from SVG raw files
JavaScript
22
star
95

quick-2fa

Safely generate two-factor authentication tokens into clipboard
JavaScript
21
star
96

async-graph-resolver

A Utility to handle execution and aggregation of async actions
TypeScript
21
star
97

DetoxIPC

DetoxIPC is an asynchronous, bi-directional inter-process remote invocation library for Apple platforms with an API similar to Apple's NSXPCConnection.
Objective-C
21
star
98

react-native-animation-library

JavaScript
20
star
99

data-capsule

A pluggable capsule for storing key/value data for your application
TypeScript
20
star
100

DTXLoggingInfra

Logging infrastructure for Apple platforms
Objective-C
18
star