Don't reconized import statement in with-jest-typescript example

[kkh975]

Examples bug report

I just added simple test file(not typescript file) in with-jest-typescript example.

import React from 'react';
import { shallow } from 'enzyme';

import Hello from './Hello';

describe('test', () => {
    it('should ', () => {
        const hello = shallow(<Hello />);
        expect(hello.text()).toEqual('Hello');
    });
});

and Hello.js file is

import React from 'react'

const Hello = () => <div>Hello</div>

export default Hello;

Example name

with-jest-typescript

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Open a project(example > with-jest-typescript)
2. You make two files(Hello.js, Hello.test.js).
3. Go to console. and "npm run test" or "yarn test"

Screenshots

System information

• OS: macOS
• Version of Next.js: [e.g. 6.0.0]

[ztanner]

I took a look into this. The issue you're experiencing is that jest.config.js is only configured to use babel-jest on *.tsx files. If you were to rename Hello.test.js to Hello.test.tsx it would work, but this is not ideal, since it's not a TypeScript component.

To support *.js extensions, you'd have to update your transform in jest.config.js to look something like:

  transform: {
    '^.+\\.(js|tsx)?$': 'babel-jest',
  },

You will probably run into an error with this due to mismatched versions of babel-jest and jest. If you update both of those to be the same version (in this case, ^23.6.0), your tests should pass.

I've submitted a PR to make sure those versions are in sync.