测试捆绑没有反应的 React 组件库时的开玩笑错误

Question

I've been building React apps for a while now so I wanted to make a React Component library. I've been reading about approaches and went with one where you use Webpack and Babel to bundle without React because if you don't there will be errors because two versions of React will be imports (one in the component library and one in the app). Anyway, I have a Jest setup file that has this:

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Also, I have my component library that transpiles and for testing I've created a basic Form Component that basically is just an empty form that I can use it in a demo app but when I do a simple Jest test:

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

import { Form } from './form.js'

describe('Test forms', () => {
  test('render correctly', () => {
    expect(shallow(<Form />)).toEqual(<form />)
  })
})

I get a ReferenceError: React is not defined error. It specifically points to my Form Component's return <form /> line.

Any help would be greatly appreciated. Also if there is a better approach for building React Component libraries please let me know. Thanks!

Update 1: I've removed enzyme and added react-test-renderer and I get the same error ReferenceError: React is not defined and it still points to the Form Component's return <form /> line.

Update 2: I switched back to enzyme. I've commented out my Jest setup file to confirm Jest doesn't run tests without the Adapter configured and got the error you'd expect so I'm confident it's not that. To try to narrow down the problem I imported React in my Component and now get a different error:

- Expected
+ Received

- <form />
+ ShallowWrapper {}

   8 | describe('Test forms', () => {
   9 |   test('render correctly', () => {
> 10 |     expect(shallow(<Form />)).toEqual(<form />)
     |                               ^
  11 |     // const renderer = ReactTestRenderer.create(<Form />)
  12 |     // expect(renderer.toJSON()).toMatchSnapshot()
  13 |   })

So I'm pretty confident my problem is that since my React Component library isn't including React in the bundle any test with JSX will fail. And then once that is fixed I'll have to figure out the Jest failure which is probably just me not reading the updated documentation because a quick glance at there docs shows I should be doing something like this:

const wrapper = shallow(<Component />);
expect(wrapper.contains(<div className="unique" />)).to.equal(true);

Update 3: Fixed the Jest error by adding enzyme-to-json and comparing the component to a snapshot. Still need to research how to include React in the Jest tests.

Answer 1

You need to configure Enzyme Adapter before writing tests

import React from 'react'
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

//tests

Answer 2

With jest as a standalone, you'd need the react renderer. Since you're using enzyme , you'll need to configure the enzyme adapter in a file called setupTests.js : https://airbnb.io/enzyme/docs/installation/

npm i -D enzyme-adapter-react-16

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

You can then reference that file in your jest.config : https://airbnb.io/enzyme/docs/guides/jest.html

 "setupFilesAfterEnv": ["<rootDir>src/setupTests.js"]

Answer 3

As documented in my updates, I think I have to settle for the solution where I modify my React Components in my React Component library to import React. Before they were treating React as already included external library. Then shallow has a wrapper for testing that was empty so I added the enzyme-to-json library to compare json instead and it worked. Now my snapshot reflects the React Components I am trying to render in the Jest tests.

Unless anyone else can give me a better answer I'll have to settle for this answer but before I was trying to make my library have a external peer dependency for React so to run it it wasn't required that I import it but Jest does require me to import it.