Question

我需要导入json数据来运行react redux测试。如何将devMock.json导入dashboard.test.js？我可以不安装依赖项吗？

devMock.json

import * as actions from '../actions/dashboardActions';
import * as types from '../actions/actionTypes';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import expect from 'expect';
import fetchMock from 'fetch-mock';

const middlewares = [ thunk ]
const mockStore = configureMockStore(middlewares)

describe('Dashboard action creators should be called', () => {

afterEach(() => {
  fetchMock.reset()
})

dashboard.test.js

var exceptionFlag = ""

try{

  exceptionFlag = "FALSE"

}
catch{
  exceptionFlag = "TRUE"
}

Answer 1

您可以将.json文件更改为.js。像那样：

export {
"data": {
    "0": 11,
    "1": 1
},
"polarity_freq": {
   "negative": 214,
   "positive": 220
},
"sentiments_freq": {
    "anger": 1,
    "fear": 0,
    "sad": 2,
    "joy": 11
 }
};

之后，只需像普通的.JS文件一样导入它。

import DevMock from './devMock.js';

Answer 2

Matheus'回答是您的用例的正确解决方案，您必须指定要导出的对象的标识符，如下所示：

export const myJson = {
    "data": {
        "0": 11,
        "1": 1
    },
    "polarity_freq": {
        "negative": 214,
        "positive": 220
    },
    "sentiments_freq": {
        "anger": 1,
        "fear": 0,
        "sad": 2,
        "joy": 11
    }
};

然后您可以像以下一样导入它：

import { myJson } from "./myJson.js";

此外，如果只导出文件中的一个对象，则可以使用默认导出：

export default { ... }

然后使用您想要的名称导入：

import myAwesomeJson from "./myJson.js";

Answer 3

仅当我在主App.js中导入JSON文件并将json对象传递到props中的子组件时，这才对我有用。

当我尝试直接在子组件中导入json时，仅在将子文件导入到App中时才导入json对象，而在渲染子组件时不导入。

如何在React中导入json文件

3 个答案: