0

I am using [email protected] with [email protected] with [email protected] and running my tests, they fail with "React is not defined".

 FAIL  src/components/Button/test.tsx
  ● <Button> › renders text correctly

    ReferenceError: React is not defined

       6 |     it('renders text correctly', () => {
       7 |         const text = 'hello there i am a test'
    >  8 |         const { getByText } = customRender(<Button>{text}</Button>)
         |                                            ^
       9 |         expect(getByText(/hello there i am a test/)).toBeTruthy()
      10 |     })
      11 |     it('matches the snapshot', () => {

      at Object.it (src/components/Button/test.tsx:8:44)

  ● <Button> › matches the snapshot

    ReferenceError: React is not defined

      10 |     })
      11 |     it('matches the snapshot', () => {
    > 12 |         const { container } = customRender(<Button />)
         |                                            ^
      13 |         expect(container.firstChild).toMatchSnapshot()
      14 |     })
      15 | })

      at Object.it (src/components/Button/test.tsx:12:44)

Button.test.tsx:

import React from 'react'
import Button from '.'
import { customRender } from '../../test-utils'

describe('<Button>', () => {
    it('renders text correctly', () => {
        const text = 'hello there i am a test'
        const { getByText } = customRender(<Button>{text}</Button>)
        expect(getByText(/hello there i am a test/)).toBeTruthy()
    })
    it('matches the snapshot', () => {
        const { container } = customRender(<Button />)
        expect(container.firstChild).toMatchSnapshot()
    })
})

Also playing with React import, like moving it from line 1 to line 3 seems to sometimes make the tests pass. Which is very strange.

4
  • What does import Button from '.' do? Commented Apr 2, 2019 at 12:48
  • It was VSCode's auto import. It's importing from index. So import Button from './index'. Commented Apr 2, 2019 at 12:49
  • if I use import Button from './index' it actually fixes this test, but other tests break. I seem to have to migrate import React, { useContext} from 'react' into import React from 'react' and then use React.useContext or do import * as React :/ Commented Apr 2, 2019 at 12:50
  • So running the test on CI it passed. I made an unrelated change to the CI script, and now the tests fail again. Very strange :/ Commented Apr 2, 2019 at 12:55

1 Answer 1

1

This is an issue with the jsx pragma and emotion 10 as discussed and explained in this issue.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.