search

timarney / react-app-rewired

Override create-react-app webpack configs without ejecting
MIT License
9.81k stars 425 forks source link

Test script failing to finish when running inside of TravisCI #446

Closed NoPhaseNoKill closed 4 years ago

NoPhaseNoKill commented 4 years ago

Issue: Running 'yarn react-app-rewired' is hanging (not finishing) when running inside of a TravisCI container (docker). It seems to run indefinitely, indicating there's an unreturned promise. These tests run fine locally.

Note: I have tested inside of container, and confirmed that if I go back to using 'react-script test' the tests run as expected. Whether or not I need some additional config, or it's a legit bug I cannot determine. The script never seems to finish. The issue seems to be caused by the following piece of code found inside of test.js:

require(paths.scriptVersion + '/scripts/test');

When I comment this line out, the process is able to get to the end. Hence, the suspecting of a promise being unreturned/random error being thrown somewhere down the chain.

I would like to be using all of the babel config, considering the reason I've brought this in is for a CSS styling issue with Styled Components. This would affect tests being run, and specificity of the styles being applied during compilation.

Could you please advise on what I need to do?

To reproduce: 1) Add react-app-rewired to CRA. 2) Configure TravisCI for github project to run one of the scripts in package.json (seen below as react-app-rewired test) 3) Commit to said project - this will trigger a TravisCI build 4) Will hang on instantiation of test runs.

Example of failing build - these tests should take approx 5 seconds to complete (there's only 2 of them). It times out after 10 minutes: https://travis-ci.com/NoPhaseNoKill/dota-stats-ui/builds/152316923 Example project: https://github.com/NoPhaseNoKill/dota-stats-ui

package.json

{
  "name": "dota-stats-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "run-p start:app start:server",
    "start:app": "react-app-rewired start",
    "start:server": "ts-node-dev --respawn --transpileOnly -r esm -r dotenv/config src/server.ts --exec nodemon -r esm",
    "build": "react-app-rewired build",
    "test": "CI=true react-app-rewired test",
    "eject": "react-scripts eject",
    "lint": "eslint src/ --ext .ts,.tsx,.js,.jsx"
  },
  "proxy": "http://localhost:3001",
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && yarn test && pretty-quick --staged"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.0-rc4",
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^10.0.0",
    "axios": "^0.19.2",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "esm": "^3.2.25",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "request": "^2.88.2",
    "semantic-ui-react": "^0.88.2",
    "styled-components": "^5.0.1",
    "typescript": "~3.8.3"
  },
  "devDependencies": {
    "@types/cors": "^2.8.6",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/express": "^4.17.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/request": "^2.48.4",
    "@types/styled-components": "^5.0.1",
    "@typescript-eslint/eslint-plugin": "^2.22.0",
    "@typescript-eslint/parser": "^2.22.0",
    "babel-plugin-styled-components": "^1.10.7",
    "customize-cra": "^0.9.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "express": "^4.17.1",
    "husky": "^4.2.3",
    "node-env-run": "^3.0.2",
    "nodemon": "^2.0.2",
    "npm-run-all": "^4.1.5",
    "prettier": "^1.19.1",
    "pretty-quick": "^2.0.1",
    "react-app-rewired": "^2.1.5",
    "ts-jest": "^25.2.1",
    "ts-node-dev": "^1.0.0-pre.44"
  }
}

config-overrides.js: 

const { useBabelRc, override } = require('customize-cra');
/*
  Used to allow babel plug-ins without having to eject create-react-app
 */
module.exports = override(useBabelRc());

.babelrc:

{
  "plugins": [
    [
      "@quickbaseoss/babel-plugin-styled-components-css-namespace", {"cssNamespace": "&&&"}
    ],
    "babel-plugin-styled-components"
  ]
}

'config' variable found inside of test.js returns the following if it helps: 

created config: {
  roots: [ '<rootDir>/src' ],
  collectCoverageFrom: [ 'src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts' ],
  setupFiles: [
    '/home/travis/NoPhaseNoKill/dota-stats-ui/node_modules/react-app-polyfill/jsdom.js'
  ],
  setupFilesAfterEnv: [ '<rootDir>/src/setupTests.ts' ],
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'
  ],
  testEnvironment: 'jest-environment-jsdom-fourteen',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '/home/travis/NoPhaseNoKill/dota-stats-ui/node_modules/react-scripts/config/jest/babelTransform.js',
    '^.+\\.css$': '/home/travis/NoPhaseNoKill/dota-stats-ui/node_modules/react-scripts/config/jest/cssTransform.js',
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '/home/travis/NoPhaseNoKill/dota-stats-ui/node_modules/react-scripts/config/jest/fileTransform.js'
  },
  transformIgnorePatterns: [
    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
    '^.+\\.module\\.(css|sass|scss)$'
  ],
  modulePaths: [ '/home/travis/NoPhaseNoKill/dota-stats-ui/src' ],
  moduleNameMapper: {
    '^react-native$': 'react-native-web',
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
  },
  moduleFileExtensions: [
    'web.js',  'js',
    'web.ts',  'ts',
    'web.tsx', 'tsx',
    'json',    'web.jsx',
    'jsx',     'node'
  ],
  watchPlugins: [ 'jest-watch-typeahead/filename', 'jest-watch-typeahead/testname' ],
  rootDir: '/home/travis/NoPhaseNoKill/dota-stats-ui'
}

edit: some slight formatting

NoPhaseNoKill commented 4 years ago

Some further investigation done via this PR. https://github.com/NoPhaseNoKill/dota-stats-ui/pull/21

Still no clear answer/solution to this problem

NoPhaseNoKill commented 4 years ago

Closing issue. Was found to be that a plugin I was using in the babel config was incompatible with newer versions of node. Made travis.yml config have node 10, and problem solved. Thanks @dawnmist

dawnmist commented 4 years ago

Finally found the issue - feel free to read through the PR for where we were testing things.

In this case, the issue turned out to be that babel-plugin-styled-components-css-namespace was incompatible with node.js versions later than 12.10, which caused the tests to hang when trying to create styled components with that plugin active.