Component for handling fixture data for client side tests


This component was conceived by the desire to test client side applications without needing to mock API requests. It doesn't make sense to mock an API when Loopback is already being used. Environment specific datasource configurations were already available, the only piece missing was an easy way to add and remove fixtures when required. Hopefully this component will be useful for others as well, if you have any suggestions to improve the usefulness of this component please let me know, or even better feel free to submit a pull request.



  1. Install in you loopback project:

    npm install --save loopback-component-fixtures

  2. Create a component-config.json file in your server folder (if you don't already have one)

  3. Configure options inside component-config.json. (see configuration section)

     "loopback-component-fixtures": {
       "{option}": "{value}"
  4. Create a folder for storing test fixtures.

    The default location is /server/test-fixtures. This can be set in component-config.json(see below)

  5. Create datasources.{env}.jsonfile. This is the datasources definition that will be used depending on the value of NODE_ENV where you want to use fixture data. Example:

     "db": {
       "name": "db",
       "connector": "memory"



  • loadFixturesOnStartup

    [Boolean] : Defines whether the fixture data should be loaded on startup. (default: false)

  • errorOnSetupFailure

    [Boolean] : Defines whether the API shows/throws an error when fixtures fail to load. (default: false)

    If true:

    • Bad fixtures loaded on startup will cause the application to fail with an error.
    • Bad fixtures loaded via the REST endpoint will return a 500status code and an errorobject with details about the specific fixture failures.

    If false:

    • App will continue running (but log an error) if bad fixtures are loaded on startup
    • App will return a 200 with no error details if bad fixtures are loaded when calling the fixture setup REST endpoint, but will log an error to the console.
  • environments

    [String/Array] : The name(s) of the environment(s) where the fixtures should be used. (default: 'test')

  • fixturesPath

    [String] : The location of of the fixture definitions relative to the project root. (default: '/server/test-fixtures/')

Fixture Files

Fixtures are stored in .json files and should have the same name as the loopback model definitions they correspond to. The content should be either an object (for a single item) or an array of objects for multiple items.

Setup/Teardown Fixtures

Fixtures can be setup at startup by setting loadFixturesOnStartupto truein the component-config file. The fixtures can be setup manually by making a GET request to the endpoint <api-root>/fixtures/setupand a GET request to <api-root>/fixtures/teardownwill clear all data.

These actions are also available on the server as app.setupFixtures(callback)and app.teardownFixtures(callback).





  • 配置节点表示为静态bower_components?

    Amol M KulkarniConnor Leech(https://stackoverflow.com/users/1933917/amolmkulkarni)提出了一个问题:configure ...

    2 年前
  • 解读 vue-class-component 源码实现原理

    导读 使用过一段时间 class 来定义组件,要用 vuepropertydecorator 提供定义好的装饰器,辅助完成所需功能,对这个过程好奇,就研究了源码。内部主要依靠 vueclasscomp...

    1 个月前
  • 解决vue报错Failed to mount component

    Vue warn: Failed to mount component: template or render function not defined. 今天上班运行vue项目,当我进入昨天写的一个...

    2 年前
  • 解决react:Warning: componentWillMount has been renamed问题

    1. 问题描述 当我新克隆一个react项目,然后安装好依赖包后,启动服务,发现浏览器控制台报如下warning: QQ20191101004128.png(https://img.java...

    7 个月前
  • 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性。但在尝试之前,最好先阅读本文,对 Function Component 的思维模...

    1 年前
  • 白话速述 styled-components 4.x 的使用

    废话不多话,来上车! 安装: 简述使用: 1、 创建全局的样式: 首先创建一个JS文件,例如style.js ①:import { createGlobalStyle } from 'st...

    1 年前
  • 用slot和component实现表单共用

    业务需求 在oa开发中,有许多流程,每个流程里都会有很多字段,比如流程标题、拉下选择,附件等等,有些是每个流程都会有的,有些是特有的,按常规的方法开发,就为为一个流程写一个表单,校验,提交。

    1 年前
  • 浅谈 TypeScript - PureComponent

    我们都知道 的刷新机制,因此如果每一次的变动都要刷新一下界面,这对于应用程序的性能来说是一个非常不科学的事情,因此在没有 之前,我们都需要手动使用 来确认到底要不要刷新界面,如: 如果返回...

    2 年前
  • 浅析vue component 组件使用

    component 使用 component的注册 1.全局注册 使用用Vue.component('componentName',{template:'hello world'})在初始化实例...

    3 年前
  • 模拟 vue3.0 rfcs `createComponent` api 中的`props`类型推导

    rfc 中类型推导部分 Type Inference(https://github.com/vuejs/rfcs/blob/functionapis/activerfcs/0000functiona...

    1 年前


扫码加入 JavaScript 社区