Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

APshenkin
Copy link
Collaborator

@APshenkin APshenkin commented Dec 19, 2017

What is a goal:
We want to have component tests for React in the same maner as selenium tests.

What's is included in this PR:

  1. Support for mocha features compilers and require. This should solve these issues: Coffeescript support #474 [ Question ] How to get babel working to support imports? #370
  2. Add option --transpile. When it's true, then transpiled code will process without issues. And also React components will displays correctly in test stdout.
  3. Add Enzyme helper. Currently only mount methods. Have to add some manipulation methods

How to run it:

  1. add these deps to package.json:
    enzyme
    enzyme-adapter-react-16
    jsdom
    react-element-to-string
    sinon
    babel-polyfill
    babel-core
    esprima
    escodegen

and install them.

  1. create .babelrc file to store babel settings. If you are using webpack aliases in your project you also have to install babel-plugin-webpack-aliases:
    e.g.
{
  "presets": [ "react", "es2015", "stage-1" ],
  "plugins": [
    [ "babel-plugin-webpack-aliases", { "config": "./webpack.config.js" } ]
  ]
}
  1. Write a test. E.g.:
import React from 'react';
import Button from '_shared/components/button';

Feature('test');

Scenario('simple test', async (I) => {
  const component = await I.mountComponent(<Button/>);
  console.log(component.html());
});
  1. create run script in package.json. E.g.: codeceptjs run --transpile --compilers js:babel-core/register,js:babel-polyfill

  2. In my case there are some css styles imports in project. They can't be traspiled by babel automaticly. In our project it's webpack job, so we have to emulate this imports. To do this I create a special js file:

// ./tests/helper.js
function donothing() {
  return null;
}

require.extensions['.css'] = donothing;
require.extensions['.less'] = donothing;
require.extensions['.scss'] = donothing;
require.extensions['.styl'] = donothing;

and add it to codeceptjs run script:
codeceptjs run -R mocha-multi --transpile --compilers js:babel-core/register,js:babel-polyfill,css:./tests/helper

So next steps for this:

  • Test it with real project
  • Add more Enzyme and sinon methods
  • Write tests for these feature
  • Create a boilerplate project for enzyme

@codeceptjs codeceptjs deleted a comment Dec 19, 2017
@DavertMik
Copy link
Contributor

I think this PR should be split into two:

  • transpilers/babel support
  • enzyme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants