Type check test files

Bug report

I created a new project with the --typescript flag, and added a type for my component’s props like so:

type AppProps = {
  name: string
};

class App extends Component<AppProps> {
  render() {
    return (
      ...
    );
  }
}

In index.tsx when I write something like (note the missing prop):

ReactDOM.render(<App />, document.getElementById('root')); // name prop is missing

I get an error in both my editor (VSCode) and on my console when I run yarn start.

However in my tests if I have something like:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

I get the type error in my editor but NOT when I run yarn test, the tests run successfully in fact.

Is this intended?

[beausmith]

Another option, update your test scripts to run tsc.

Update your package.json file:

- "test": "react-scripts test",
+ "test": "tsc && react-scripts test",

The tsc command will look for compiler options in the tsconfig.json file if one exists.

Additional Optional Solutions

If you have a different testing script for CI then add tsc to that one too:

"test:ci": "CI=true tsc && react-scripts test --env=jsdom --coverage",

If you’re using husky, add tsc to your pre-commit hook:

  "husky": {
    "hooks": {
      "pre-commit": "tsc && lint-staged"
    }
  },

[DjebbZ]

Any update on this point ?