can't import redux store in webdriverio test file

Question

I'm trying to import my redux store so I can make sure the store is being accessed and set properly but trying to import the redux store gives me the following error:

 ERROR: Unexpected token import
firefox
/Users/Name/Desktop/project/internal-dashboard/dashboard/src/store.js:1
(function (exports, require, module, __filename, __dirname) { import rootReducer from './reducers/rootReducer';
                                                              ^^^^^^

Syntax    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/Name/Desktop/project/internal-dashboard/dashboard/test/login.js:2:15)

Not sure why it's telling me it's an unexpected token. The app runs properly when I start it so why does it has a problem with the import token being used in the store file when I run webdriverio tests?

here is the store file:

import rootReducer from './reducers/rootReducer';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';


const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
);

export default store;

here's my login test

let assert = require('assert');
import store from '../src/store';

describe("Login Page", () => {
    console.log(store.getState());
    it('should tell user to enter a username', () => {
        browser.url('./');
        let loginHeader = $('p=SIGN IN');
        loginHeader.waitForExist(20000);

        browser.setValue('#username', '');
        browser.setValue('#password', '');
        browser.click('.ui.button');

        let enterUsernameDiv = $('div=Please enter a username');
        enterUsernameDiv.waitForExist(10000);
    });
}

score 0 · Answer 1 · answered Aug 28 '18 at 16:34

0

You can't really open redux store using webdriverio, webdriverio doesn't know anything about your code, it's opening the browser and navigate to pages.

In order to check your redux store, you need to use unit tests, something like jest. What you're doing now is more of functional tests.

answered Aug 28 '18 at 16:34

Anas

5,622
5
39
71

so for a true end to end test, i'll have to have both jest and webdriver tests? – james Aug 28 '18 at 16:34
@james No webdriverio is fine for end to end tests. In your webdriverio you don't need to know about your redux state. For webdriverio, it doesn't matter if your website is build using react/redux or angular. For end to end test, what matters is that the app is working properly. – Anas Aug 28 '18 at 16:37
If you want to make sure that your code is working properly, and it won't break in the future if you do changes, you should do unit tests. but that's really to test individual functions is isolation. – Anas Aug 28 '18 at 16:39

score 0 · Answer 2 · answered Dec 06 '18 at 11:11

As it's mentioned in the installation guide on redux website

Note that unlike Redux itself, many packages in the Redux ecosystem don't provide UMD builds, so we recommend using CommonJS module bundlers like Webpack and Browserify for the most comfortable development experience.

Doing the following when using redux alone in node without react will fix issue

import { createStore, applyMiddleware } from 'redux';

to be

const { createStore, applyMiddleware } = require('redux');

can't import redux store in webdriverio test file

2 Answers2