Type check test files

[affanshahid]

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?

[martinmckenna]

Check out your tsconfig.json.

Change this to an empty array if you want to include them

 "exclude": [
 "**/__tests__/**",
 "**/?*test.*",
 "**/?*spec.*"
 ]

[eddedd88]

the types are checked in the build script

[Timer]

This is currently a known limitation. We can check these types in the future.

For now, please rely on VSCode to type check your tests or run tsc.

[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"
 }
 },