Skip to content

This is a boilerplate on how to integrate Mocha/Chai/Enyzme in create-react-app project. (本示例用于演示如何在create-react-app项目中集成Mocha/Chai/Enyzme)

Notifications You must be signed in to change notification settings

husm/react-mocha-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is a boilerplat on how to integrate Mocha/Chai/Enyzme in create-react-app project.

This project was bootstrapped with Create React App.

Step 1: Create react project with create-react-app cli

create-react-app react-mocha-boilerplate
cd react-mocha-boilerplate

Step 2: Install Mocha/Chai/Enzyme

npm run eject
npm install chai enzyme mocha react-addons-test-utils sinon --save-dev
npm install babel-preset-es2015 babel-preset-stage-2 --save-dev

Step 3: Change the default test script in package.json

......
  "scripts": {
    "test": "mocha --require ./testSetup.js --compilers babel-core/register ./test/*test.js",
    "test:watch": "npm test -- -w"
  },
......

Step 4: Add a test configuration file testSetup.js under the project root folder

'use strict';

import jsdom from 'jsdom';

global.document = jsdom.jsdom('<html><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;

function noop() {
  return {};
}

// prevent mocha tests from breaking when trying to require a css file
require.extensions['.css'] = noop;
require.extensions['.svg'] = noop;

Step 5: Add test folder and a test file (./test/demotest.test.js)

import React from 'react'
import { shallow } from 'enzyme'
import { expect } from 'chai'
import App from '../src/App'

const wrapper = shallow(<App />);

describe('(Component) App', () => {
  it('renders...', () => {
    expect(wrapper).to.have.length(1);
  });
});

Step 6: Add a .babelrc file, and set the preset

{
    "presets": ["es2015", "stage-2", "react"]
}

Step 7: Run the test under project root path

npm run test

About

This is a boilerplate on how to integrate Mocha/Chai/Enyzme in create-react-app project. (本示例用于演示如何在create-react-app项目中集成Mocha/Chai/Enyzme)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published