CircleCI中的React应用:运行Jest时失败

时间:2019-05-30 15:35:02

标签: javascript reactjs jestjs circleci

我有一个React,它在CircleCI中由于以下原因而失败:

#!/bin/bash -eo pipefail
yarn test
yarn run v1.5.1
$ jest
 FAIL  src/Form.test.js
  ● Test suite failed to run

    Cannot find module './Store' from 'Form.js'

    However, Jest was able to find:
        './Form.js'
        './Form.test.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'test.js', 'css'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

      1 | import React from 'react';
      2 | import { Form, Input, Button } from 'reactstrap';
    > 3 | import { actions } from './Store';```

我的Store.js文件只是JS文件,其中包含动作,减速器等。

import { createStore, combineReducers } from 'redux';

const initialState = {
  characters: []
};

// Actions
export const actions = {
  addChar: ch => {
    return {
      type: 'ADD_CHAR',
      payload: ch
    };
  },

  addAllChars: characters => {
    return { type: 'ADD_ALL_CHARS', payload: { characters: characters } };
  },
  increment: () => {
    return { type: 'INCR' };
  },
  decrement: () => {
    return { type: 'DECR' };
  }
};

// Reducers
function charReducer(state = {}, action) {
  switch (action.type) {
    case 'ADD_ALL_CHARS': {
      return action.payload.characters;
    }
    case 'ADD_CHAR': {
      let newest = [...state];
      let char = {
        ...action.payload,
        id: newest.length + 1
      };
      newest.push(char);
      return newest;
    }
    default:
      return state;
  }
}

const appReducer = combineReducers({
  characters: charReducer
});

// Store
export const store = createStore(appReducer, initialState);
// Debug
window.store = store;
window.actions = actions;

例如Form.js文件的开头是:

import { Form, Input, Button } from 'reactstrap';
import { actions } from './Store';
import { connect } from 'react-redux';

babel.config.js是:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    '@babel/plugin-transform-arrow-functions',
    '@babel/plugin-proposal-class-properties'
  ]
};

package.json的一部分是:

    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "json",
      "jsx",
      "ts",
      "tsx",
      "node",
      "test.js",
      "css"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },

最后是CircleCI配置:

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
      - image: circleci/node:8.10

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}

      # run tests!
      - run: yarn test

0 个答案:

没有答案