[SOLVED] Testing action dispatch

Help Requests
1

Hi,

I’d like to test a component. This component dispatches an action in its activation method. Sadly, when I call the activate method, I get this error:

    TypeError: Cannot read property 'mark' of undefined

      at Store.<anonymous> (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:375:57)
      at step (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:94:23)
      at Object.next (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:75:53)
      at node_modules/aurelia-store/dist/commonjs/aurelia-store.js:68:71
      at __awaiter (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:64:12)
      at Store.Object.<anonymous>.Store.internalDispatch (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:365:16)
      at Store.<anonymous> (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:346:51)
      at step (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:94:23)
      at Object.next (node_modules/aurelia-store/dist/commonjs/aurelia-store.js:75:53)

From what I see, it comes from aureliaPal.PLATFORM.performance.mark("dispatch-start"); in the code of the plugin. I am using Jest as a test runner and Webpack as a bundler. Any idea how to solve this? I’d really like to fully test this.

My test file:

import {bootstrap} from 'aurelia-bootstrapper';
import {Container, PLATFORM} from 'aurelia-framework';
import {Store} from 'aurelia-store';
import {StageComponent} from 'aurelia-testing';
import {registerRssBackendsActions} from '../../../src/store/rss-backends-actions';
import {createInitialState} from '../../__fixtures__/state-fixtures';

describe('Route: DisplayArticlesFromCategory', () => {
    describe('Render tests', () => {
        let container;
        let component;
        let store;
        let state;

        beforeEach(async() => {
            container = new Container();
            container.makeGlobal();
            state = createInitialState();
            state.rss.isFetching = true;
            store = new Store(state);
            // FIXME: This is required to make the test pass.
            store.dispatch = jest.fn().mockImplementation(() => {});
            registerRssBackendsActions(store);
            container.registerInstance(Store, store);

            component = StageComponent.withResources(PLATFORM.moduleName('../../src/routes/display-articles-from-category'))
                .inView('<display-articles-from-category></display-articles-from-category>');

            await component.create(bootstrap);
            component.viewModel.store = store;
            component.viewModel.activate();

            return component;
        });

        it('should render and match snapshot fetching', async() => {
            await component.waitForElement('.fa-spinner');

            expect(document.body.outerHTML).toMatchSnapshot();

            component.dispose();
        });
    });
});
1 Like
2

Most likely you are using an older version of the pal for nodejs. Take a look at this PR when it got introduced. Its also tested using jest.

1 Like
3

I am using aurelia-pal-nodejs version 1.2.0 so it should be good. I tried to add some console.log in node_modules/aurelia-store/dist/commonjs/aurelia-store.js and PLATFORM.performance is indeed undefined there but PLATFORM.global.performance is. If I update the code in aurelia-store to use PLATFORM.global.performance, it works as expected.

What is really strange is that in jest-pretest.ts and my test file, PLATFORM.performance is correctly defined.

Any idea where this can come from?

Note: you can clone the project with git clone https://gitlab.com/Jenselme/aurss.git --branch test/display-articles-from-category. To run tests, run yarn test. It may help you understand the problem.

1 Like
4

I have no idea why that is, maybe an issue with pal 1.2. anyways I’ll give your repro a try next week to see what I can find out

2 Likes
5

So I’ve:

  • pulled your sample
  • npm installed it
  • npm run test

and all tests are passing.

Test Suites: 8 passed, 8 total
Tests:       34 passed, 34 total
Snapshots:   6 passed, 6 total

Is there already a workaround added to the current code base? Can you point me to the exact issue?

I’ve also tried it with yarn test and the only difference is that the tests take 19,98s instead of 5,32s but aside from that ok. Perhaps yarn install is the difference?

In npm you have the command npm list aurelia-pal-nodejs which shows you the used versions and whether there are multiple of them used. Dunno what the equivalent of yarn is but try checking it. Also try truncating the whole node_modules folder and delete and package-lock (yarn equivalent) and do a fresh install.

1 Like
6

Removing yarn.lock and reinstalling did fix it. I should have though about that! Anyway, thanks for the help!

1 Like
7

I stopped counting how many times ive got bitten by this :laughing:

3 Likes