New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document wallaby.js for create-react-app-ts #1431

Closed
acchou opened this Issue Dec 11, 2017 · 30 comments

Comments

Projects
None yet
9 participants
@acchou

acchou commented Dec 11, 2017

Issue description or question

Consider adding a sample wallaby.js configuration for create-react-app-ts generated projects, which combine React + JSX with Typescript.

Wallaby.js configuration file

Here's an example that I adapted from the create-react-app example. It seems to work for me, but I'm not 100% sure I adapted it correctly:

module.exports = function(wallaby) {
    // Babel, jest-cli and some other modules may be located under
    // react-scripts/node_modules, so need to let node.js know about it
    var path = require("path");
    process.env.NODE_PATH +=
        path.delimiter +
        path.join(__dirname, "node_modules") +
        path.delimiter +
        path.join(__dirname, "node_modules/react-scripts/node_modules");
    require("module").Module._initPaths();

    return {
        files: [
            "src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)",
            "!src/**/*.test.+(js|jsx|ts|tsx)"
        ],

        tests: ["src/**/*.test.+(js|jsx|ts|tsx)"],

        env: {
            type: "node",
            runner: "node"
        },

        compilers: {
            "**/*.js?(x)": wallaby.compilers.babel({
                babel: require("babel-core"),
                presets: ["react-app"]
            }),
            "**/*.ts?(x)": wallaby.compilers.typeScript({
                module: "commonjs",
                jsx: "React"
            })
        },

        setup: wallaby => {
            const jestConfig = require("react-scripts-ts/scripts/utils/createJestConfig")(
                p => require.resolve("react-scripts-ts/" + p)
            );
            delete jestConfig.transform["^.+\\.(js|jsx)$"];
            delete jestConfig.transform["^.+\\.(ts|tsx)$"];
            delete jestConfig.testEnvironment;
            wallaby.testFramework.configure(jestConfig);
        },

        testFramework: "jest"
    };
};

Code editor or IDE name and version

Visual Studio Code v1.18

OS name and version

OSX

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Dec 11, 2017

Member

Awesome, thanks for sharing! The config looks good to me, have added the link to it to the relevant docs section.

Member

ArtemGovorov commented Dec 11, 2017

Awesome, thanks for sharing! The config looks good to me, have added the link to it to the relevant docs section.

@yonatanmn

This comment has been minimized.

Show comment
Hide comment
@yonatanmn

yonatanmn Dec 21, 2017

wasn't working till adding:

    files: [
      'tsconfig.json', // <--
      'tsconfig.test.json', // <--
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      '!src/**/*.test.[jt]s?(x)'
    ],

yonatanmn commented Dec 21, 2017

wasn't working till adding:

    files: [
      'tsconfig.json', // <--
      'tsconfig.test.json', // <--
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      '!src/**/*.test.[jt]s?(x)'
    ],
@guylemon

This comment has been minimized.

Show comment
Hide comment
@guylemon

guylemon Jan 3, 2018

Hi @ArtemGovorov, not sure where to put this, but here is a working config for create-react-app and typescript using VSCode. I was able to get it working without some of the additional options used above. Hope this is helpful for anyone finding their way here!

/**
 * Simple typescript config for an un-ejected create-react-app using typescript
 *
 * This config assumes the following:
 *
 * 1. Your tests are located in a file named tests.ts, or tests.tsx, within `src/`
 *
 * 2. You are running a version of node that can handle template strings and `const`
 *
 * 3. Your basic dependencies look something like the package.json below
 */

module.exports = function(wallaby) {
  // change this expression to reflect your naming conventions
  const testPathExp = 'src/**/tests.ts?(x)';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      `!${testPathExp}`,
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node',
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app'],
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React',
      }),
    },

    testFramework: 'jest',
  };
};

The package.json file:

/**
 * Package JSON
 */
{ 

  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.8.0",
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^21.1.8",
    "@types/node": "^8.0.53",
    "@types/react": "^16.0.25",
    "@types/react-dom": "^16.0.3",
  }
 }

guylemon commented Jan 3, 2018

Hi @ArtemGovorov, not sure where to put this, but here is a working config for create-react-app and typescript using VSCode. I was able to get it working without some of the additional options used above. Hope this is helpful for anyone finding their way here!

/**
 * Simple typescript config for an un-ejected create-react-app using typescript
 *
 * This config assumes the following:
 *
 * 1. Your tests are located in a file named tests.ts, or tests.tsx, within `src/`
 *
 * 2. You are running a version of node that can handle template strings and `const`
 *
 * 3. Your basic dependencies look something like the package.json below
 */

module.exports = function(wallaby) {
  // change this expression to reflect your naming conventions
  const testPathExp = 'src/**/tests.ts?(x)';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      `!${testPathExp}`,
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node',
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app'],
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React',
      }),
    },

    testFramework: 'jest',
  };
};

The package.json file:

/**
 * Package JSON
 */
{ 

  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.8.0",
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^21.1.8",
    "@types/node": "^8.0.53",
    "@types/react": "^16.0.25",
    "@types/react-dom": "^16.0.3",
  }
 }

@wallabyjs wallabyjs deleted a comment from yonatanmn Jan 3, 2018

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Jan 3, 2018

Member

@guylemon Awesome, thanks for sharing! The issue is referenced from our docs, so your solution is helpful for Wallaby users.

Member

ArtemGovorov commented Jan 3, 2018

@guylemon Awesome, thanks for sharing! The issue is referenced from our docs, so your solution is helpful for Wallaby users.

@hellnation

This comment has been minimized.

Show comment
Hide comment
@hellnation

hellnation Apr 13, 2018

I've just started with the latest version of create-react-app-ts and the very first thing I did was added the wallaby.js as described above. The boilerplate that comes with create-react-app comes with a single test, being src/App.test.tsx. With the testPathExp above, this test isn't found and so everything appears fine. If I 'yarn test' it finds the test and it passes successfully. If I then change the testPathExp so that it finds this one test:

const testPathExp = 'src/**/*.test.ts?(x)';

and run Wallaby you will get this error:

.\src\App.css:1​​
​​({"Object.":function(module,exports,require,__dirname,__filename,global,jest){.App {​​
​​ ^​​
​​​​
​​SyntaxError: Unexpected token .​​
at ​src/App.css:1​
at Object. ​src/App.tsx:4:0​
at Object. ​src/App.test.tsx:5:0​

The solution is to provide a setup method as in the documentation, but modified because the location of the script has moved (added -ts to both paths):

setup: wallaby => {
  const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));

@ArtemGovorov you may want to update the doco

The whole working script is now:

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      `!${testPathExp}`,
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node',
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app'],
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React',
      }),
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest',
  };
};

hellnation commented Apr 13, 2018

I've just started with the latest version of create-react-app-ts and the very first thing I did was added the wallaby.js as described above. The boilerplate that comes with create-react-app comes with a single test, being src/App.test.tsx. With the testPathExp above, this test isn't found and so everything appears fine. If I 'yarn test' it finds the test and it passes successfully. If I then change the testPathExp so that it finds this one test:

const testPathExp = 'src/**/*.test.ts?(x)';

and run Wallaby you will get this error:

.\src\App.css:1​​
​​({"Object.":function(module,exports,require,__dirname,__filename,global,jest){.App {​​
​​ ^​​
​​​​
​​SyntaxError: Unexpected token .​​
at ​src/App.css:1​
at Object. ​src/App.tsx:4:0​
at Object. ​src/App.test.tsx:5:0​

The solution is to provide a setup method as in the documentation, but modified because the location of the script has moved (added -ts to both paths):

setup: wallaby => {
  const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));

@ArtemGovorov you may want to update the doco

The whole working script is now:

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)',
      `!${testPathExp}`,
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node',
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app'],
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React',
      }),
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest',
  };
};
@hellnation

This comment has been minimized.

Show comment
Hide comment
@hellnation

hellnation Apr 13, 2018

@ArtemGovorov the doco I mention above is https://wallabyjs.com/docs/integration/react-jsx.html in the create-react-app section, when referring to typescript

hellnation commented Apr 13, 2018

@ArtemGovorov the doco I mention above is https://wallabyjs.com/docs/integration/react-jsx.html in the create-react-app section, when referring to typescript

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Apr 13, 2018

Member

@hellnation Thanks for sharing! Doesn't the very first config (for the issue starter) work for you? Just checked and it's working for me.

Member

ArtemGovorov commented Apr 13, 2018

@hellnation Thanks for sharing! Doesn't the very first config (for the issue starter) work for you? Just checked and it's working for me.

@tomitrescak

This comment has been minimized.

Show comment
Hide comment
@tomitrescak

tomitrescak May 17, 2018

Any love for create-react-app 2.0 ? I am getting 0/0 on tests ;(

tomitrescak commented May 17, 2018

Any love for create-react-app 2.0 ? I am getting 0/0 on tests ;(

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov May 17, 2018

Member

@tomitrescak Just tried

  • installing create-react-app@next (2.0.0-next.66cc7a90),
  • generating a new project with create-react-app my-app --scripts-version=react-scripts-ts
  • adding wallaby config exactly as in the first post in this issue,
  • and everything is working for me:

screen shot 2018-05-17 at 5 00 35 pm

Please share a sample repo where the issue can be reproduced.

Member

ArtemGovorov commented May 17, 2018

@tomitrescak Just tried

  • installing create-react-app@next (2.0.0-next.66cc7a90),
  • generating a new project with create-react-app my-app --scripts-version=react-scripts-ts
  • adding wallaby config exactly as in the first post in this issue,
  • and everything is working for me:

screen shot 2018-05-17 at 5 00 35 pm

Please share a sample repo where the issue can be reproduced.

@tomitrescak

This comment has been minimized.

Show comment
Hide comment
@tomitrescak

tomitrescak May 17, 2018

Hi, thanks for a prompt response. I have a bit of special setup with babel7 compiling typescript,so no react-scripts-ts

Repo is here: https://github.com/tomitrescak/babel-ts

tomitrescak commented May 17, 2018

Hi, thanks for a prompt response. I have a bit of special setup with babel7 compiling typescript,so no react-scripts-ts

Repo is here: https://github.com/tomitrescak/babel-ts

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov May 17, 2018

Member

@tomitrescak When you need to use babel after TypeScript, you may use wallaby preprocessor. Note that you also need to leave module and JSX compilation for babel (because you're using synthetic imports and JSX control statements), so TypeScript need to emit ES6 modules and plain JSX. That's how your repo npm test command works anyway.

Had sent you the pull request with the change.

Member

ArtemGovorov commented May 17, 2018

@tomitrescak When you need to use babel after TypeScript, you may use wallaby preprocessor. Note that you also need to leave module and JSX compilation for babel (because you're using synthetic imports and JSX control statements), so TypeScript need to emit ES6 modules and plain JSX. That's how your repo npm test command works anyway.

Had sent you the pull request with the change.

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 4, 2018

Is there any repo with a working solution for create-react-app-ts apps?

We have our tests like so

image

I am also using webstorm

QuantumInformation commented Sep 4, 2018

Is there any repo with a working solution for create-react-app-ts apps?

We have our tests like so

image

I am also using webstorm

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 4, 2018

I tried what some of you guys posted but get

Failed to run compilers on src/index.tsx, Error: Couldn't find preset "@babel/react" relative to directory "src"

we have

  "dependencies": {
    "axios": "^0.17.1",
    "axios-mock-adapter": "^1.14.0",
    "bootstrap": "4.1.1",
    "enzyme": "^3.4.2",
    "enzyme-adapter-react-16": "^1.2.0",
    "font-awesome": "~4.7.0",
    "formik": "^0.11.11",
    "history": "^4.7.2",
    "jest": "^22.4.3",
    "jest-cli": "^23.1.0",
    "jest-junit": "^5.0.0",
    "loadash": "^1.0.0",
    "node-sass-chokidar": "^1.2.2",
    "prettier": "^1.12.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts-ts": "2.15.1",
  }

my setup

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  process.env.NODE_ENV = 'test';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg|graphql)',
      `!${testPathExp}`
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node'
    },

    compilers: {
      '**/*.ts?(x)': wallaby.compilers.babel({
        sourceMap: true,
        compact: false,
        presets: ['@babel/react', '@babel/typescript']
      })
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts/scripts/utils/createJestConfig')(
        p => require.resolve('react-scripts/' + p),
        '.',
        ['src']
      );
      Object.keys(jestConfig.transform || {}).forEach(
        k => ~k.indexOf('^.+\\.(ts|tsx|js|jsx)') && void delete jestConfig.transform[k]
      );
      console.log(jestConfig);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};

QuantumInformation commented Sep 4, 2018

I tried what some of you guys posted but get

Failed to run compilers on src/index.tsx, Error: Couldn't find preset "@babel/react" relative to directory "src"

we have

  "dependencies": {
    "axios": "^0.17.1",
    "axios-mock-adapter": "^1.14.0",
    "bootstrap": "4.1.1",
    "enzyme": "^3.4.2",
    "enzyme-adapter-react-16": "^1.2.0",
    "font-awesome": "~4.7.0",
    "formik": "^0.11.11",
    "history": "^4.7.2",
    "jest": "^22.4.3",
    "jest-cli": "^23.1.0",
    "jest-junit": "^5.0.0",
    "loadash": "^1.0.0",
    "node-sass-chokidar": "^1.2.2",
    "prettier": "^1.12.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts-ts": "2.15.1",
  }

my setup

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  process.env.NODE_ENV = 'test';

  return {
    files: [
      'tsconfig.json',
      'tsconfig.test.json',
      'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg|graphql)',
      `!${testPathExp}`
    ],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node'
    },

    compilers: {
      '**/*.ts?(x)': wallaby.compilers.babel({
        sourceMap: true,
        compact: false,
        presets: ['@babel/react', '@babel/typescript']
      })
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts/scripts/utils/createJestConfig')(
        p => require.resolve('react-scripts/' + p),
        '.',
        ['src']
      );
      Object.keys(jestConfig.transform || {}).forEach(
        k => ~k.indexOf('^.+\\.(ts|tsx|js|jsx)') && void delete jestConfig.transform[k]
      );
      console.log(jestConfig);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};
@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Sep 5, 2018

Member

Looks like you are trying to run config for CRA 2 beta. Try the config from this post above, it is working for me on a freshly generated project npx create-react-app my-app-ts--scripts-version=react-scripts-ts.

Member

ArtemGovorov commented Sep 5, 2018

Looks like you are trying to run config for CRA 2 beta. Try the config from this post above, it is working for me on a freshly generated project npx create-react-app my-app-ts--scripts-version=react-scripts-ts.

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 5, 2018

I tried that config for my project as stands, but now get this.
Runtime error: TypeError: Cannot read property 'Component' of undefined at Object.<anonymous> (./src/component/shared/toolTip/ToolTipPopUp.js:54:19)
But my yarn test works perfectly

image

I'll try up date CRA 2 and let you know what happens

QuantumInformation commented Sep 5, 2018

I tried that config for my project as stands, but now get this.
Runtime error: TypeError: Cannot read property 'Component' of undefined at Object.<anonymous> (./src/component/shared/toolTip/ToolTipPopUp.js:54:19)
But my yarn test works perfectly

image

I'll try up date CRA 2 and let you know what happens

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 5, 2018

Same error upgrading

image

QuantumInformation commented Sep 5, 2018

Same error upgrading

image

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 5, 2018

I tried with a brand new CRA-T and ran wallaby with the above config and it works.

Will try see what if different in my project

QuantumInformation commented Sep 5, 2018

I tried with a brand new CRA-T and ran wallaby with the above config and it works.

Will try see what if different in my project

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 5, 2018

Wallaby just doesn't like this

image

image

QuantumInformation commented Sep 5, 2018

Wallaby just doesn't like this

image

image

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Sep 5, 2018

Member

Runtime error: TypeError: Cannot read property 'Component' of undefined at Object.

@QuantumInformation Thanks for sharing the additional details. Looks like you are using synthetic default imports and to support them ts-jest (used by CRA with TypeScript) compiles compiled TypeScript code with Babel as well, so you need a similar preprocessor in your Wallaby config. Adding this preprocessor should help:

module.exports = function(wallaby) {
  ...
  return {
       ...
+    preprocessors: {
+      '**/*.js?(x)': file => require('babel-core').transform(
+        file.content,
+        {
+          sourceMap: true, compact: false, filename: file.path, presets: ['react-app']
+        })
+    }
  };
};
Member

ArtemGovorov commented Sep 5, 2018

Runtime error: TypeError: Cannot read property 'Component' of undefined at Object.

@QuantumInformation Thanks for sharing the additional details. Looks like you are using synthetic default imports and to support them ts-jest (used by CRA with TypeScript) compiles compiled TypeScript code with Babel as well, so you need a similar preprocessor in your Wallaby config. Adding this preprocessor should help:

module.exports = function(wallaby) {
  ...
  return {
       ...
+    preprocessors: {
+      '**/*.js?(x)': file => require('babel-core').transform(
+        file.content,
+        {
+          sourceMap: true, compact: false, filename: file.path, presets: ['react-app']
+        })
+    }
  };
};
@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 6, 2018

Thanks for all your help so far, I added that but still get the same error:

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node'
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app']
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React'
      })
    },

    preprocessors: {
      '**/*.js?(x)': file =>
        require('babel-core').transform(file.content, {
          sourceMap: true,
          compact: false,
          filename: file.path,
          presets: ['react-app']
        })
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};

image

QuantumInformation commented Sep 6, 2018

Thanks for all your help so far, I added that but still get the same error:

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

    tests: [testPathExp],

    env: {
      type: 'node',
      runner: 'node'
    },

    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app']
      }),
      '**/*.ts?(x)': wallaby.compilers.typeScript({
        module: 'commonjs',
        jsx: 'React'
      })
    },

    preprocessors: {
      '**/*.js?(x)': file =>
        require('babel-core').transform(file.content, {
          sourceMap: true,
          compact: false,
          filename: file.path,
          presets: ['react-app']
        })
    },

    setup: wallaby => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};

image

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Sep 6, 2018

Member

@QuantumInformation Sorry, I forgot to mention that you need to remove the compilers section (at least for TypeScript). So this config should work:

module.exports = function(wallaby) {
    const testPathExp = 'src/**/*.test.ts?(x)';

    return {
        files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

        tests: [testPathExp],

        env: {
            type: 'node',
            runner: 'node'
        },

        compilers: {
            '**/*.js?(x)': wallaby.compilers.babel({
                babel: require('babel-core'),
                presets: ['react-app']
            })
        },

        preprocessors: {
            '**/*.js?(x)': file =>
                require('babel-core').transform(file.content, {
                    sourceMap: true,
                    compact: false,
                    filename: file.path,
                    presets: ['react-app']
                })
        },

        setup: wallaby => {
            const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
            Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
            delete jestConfig.testEnvironment;
            wallaby.testFramework.configure(jestConfig);
        },

        testFramework: 'jest'
    };
};
Member

ArtemGovorov commented Sep 6, 2018

@QuantumInformation Sorry, I forgot to mention that you need to remove the compilers section (at least for TypeScript). So this config should work:

module.exports = function(wallaby) {
    const testPathExp = 'src/**/*.test.ts?(x)';

    return {
        files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

        tests: [testPathExp],

        env: {
            type: 'node',
            runner: 'node'
        },

        compilers: {
            '**/*.js?(x)': wallaby.compilers.babel({
                babel: require('babel-core'),
                presets: ['react-app']
            })
        },

        preprocessors: {
            '**/*.js?(x)': file =>
                require('babel-core').transform(file.content, {
                    sourceMap: true,
                    compact: false,
                    filename: file.path,
                    presets: ['react-app']
                })
        },

        setup: wallaby => {
            const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
            Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
            delete jestConfig.testEnvironment;
            wallaby.testFramework.configure(jestConfig);
        },

        testFramework: 'jest'
    };
};
@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 6, 2018

Thx that fixed it!

QuantumInformation commented Sep 6, 2018

Thx that fixed it!

@tomitrescak

This comment has been minimized.

Show comment
Hide comment
@tomitrescak

tomitrescak Sep 6, 2018

Just a question, why do you need both preprocessor and compiler? Can't you just use preprocessor in this case?

tomitrescak commented Sep 6, 2018

Just a question, why do you need both preprocessor and compiler? Can't you just use preprocessor in this case?

@ArtemGovorov

This comment has been minimized.

Show comment
Hide comment
@ArtemGovorov

ArtemGovorov Sep 6, 2018

Member

@tomitrescak You are truly an expert in Wallaby configuration! Excellent point, the preprocessor should be enough.

Member

ArtemGovorov commented Sep 6, 2018

@tomitrescak You are truly an expert in Wallaby configuration! Excellent point, the preprocessor should be enough.

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 7, 2018

My linter is complaining about this

image

image

QuantumInformation commented Sep 7, 2018

My linter is complaining about this

image

image

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 7, 2018

@tomitrescak so I can just delete the compilers part?

QuantumInformation commented Sep 7, 2018

@tomitrescak so I can just delete the compilers part?

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 7, 2018

lol, now I have

image

yup, never seen this (k => ~k.indexOf('^.+\.(js|jsx')

QuantumInformation commented Sep 7, 2018

lol, now I have

image

yup, never seen this (k => ~k.indexOf('^.+\.(js|jsx')

@QuantumInformation

This comment has been minimized.

Show comment
Hide comment
@QuantumInformation

QuantumInformation Sep 7, 2018

Final version

// tslint:disable

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

    tests: [testPathExp],

    env: {
      runner: 'node',
      type: 'node'
    },
    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app']
      })
    },
    preprocessors: {
      '**/*.js?(x)': file =>
        require('babel-core').transform(file.content, {
          compact: false,
          filename: file.path,
          presets: ['react-app'],
          sourceMap: true
        })
    },

    setup: () => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};

QuantumInformation commented Sep 7, 2018

Final version

// tslint:disable

module.exports = function(wallaby) {
  const testPathExp = 'src/**/*.test.ts?(x)';

  return {
    files: ['tsconfig.json', 'tsconfig.test.json', 'src/**/*.+(js|jsx|ts|tsx|json|snap|css|less|sass|scss|jpg|jpeg|gif|png|svg)', `!${testPathExp}`],

    tests: [testPathExp],

    env: {
      runner: 'node',
      type: 'node'
    },
    compilers: {
      '**/*.js?(x)': wallaby.compilers.babel({
        babel: require('babel-core'),
        presets: ['react-app']
      })
    },
    preprocessors: {
      '**/*.js?(x)': file =>
        require('babel-core').transform(file.content, {
          compact: false,
          filename: file.path,
          presets: ['react-app'],
          sourceMap: true
        })
    },

    setup: () => {
      const jestConfig = require('react-scripts-ts/scripts/utils/createJestConfig')(p => require.resolve('react-scripts-ts/' + p));
      Object.keys(jestConfig.transform || {}).forEach(k => ~k.indexOf('^.+\\.(js|jsx') && void delete jestConfig.transform[k]);
      delete jestConfig.testEnvironment;
      wallaby.testFramework.configure(jestConfig);
    },

    testFramework: 'jest'
  };
};

@lucax88x

This comment has been minimized.

Show comment
Hide comment
@lucax88x

lucax88x Oct 12, 2018

Need some help there.

I've successfully used wallabyjs for months in angular applications, and this week I started a react + typescript app for some POCs.

I did the create-react-app with typescript and ejected it so I could put my wallaby configuration.

I literally tried with all the wallabyjs confs there, but nothing, it ALWAYS hang up on

image

I even tried to put the debug: true in the conf, but nothing prints out as errors.. it's like something is stuck?

hint: normal tests using the yarn run test are working, but I noticed there's like an INTERACTIVE mode in the Jest framework like this:

image

it's possible that wallaby is stuck because of that?

lucax88x commented Oct 12, 2018

Need some help there.

I've successfully used wallabyjs for months in angular applications, and this week I started a react + typescript app for some POCs.

I did the create-react-app with typescript and ejected it so I could put my wallaby configuration.

I literally tried with all the wallabyjs confs there, but nothing, it ALWAYS hang up on

image

I even tried to put the debug: true in the conf, but nothing prints out as errors.. it's like something is stuck?

hint: normal tests using the yarn run test are working, but I noticed there's like an INTERACTIVE mode in the Jest framework like this:

image

it's possible that wallaby is stuck because of that?

@smcenlly

This comment has been minimized.

Show comment
Hide comment
@smcenlly

smcenlly Oct 12, 2018

Member

Could you please create a new issue for this and provide us with a sample repo so that we can take a look at your package + wallaby configuration? We'd be happy to take a look at why this isn't working for you.

Member

smcenlly commented Oct 12, 2018

Could you please create a new issue for this and provide us with a sample repo so that we can take a look at your package + wallaby configuration? We'd be happy to take a look at why this isn't working for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment